다른 브라우저 창 크기에 맞게 크기를 변경하도록 웹 사이트에 GIF를 삽입하고 싶습니다. 다음 코드는 src = .jpg 일 때 작동하지만 src = .gif를 사용하면 코드가 깨집니다. GIF와 함께 작동하도록이 코드를 어떻게 조정할 수 있습니까?
여기 HTML 끝입니다
<a href="#" class="image"><img src="myimage.gif" alt="" data-position="25% 25%" /></a>
<div class="content">
<div class="inner">
<h2>Title here</h2>
<p>Description here.</p>
<ul class="actions">
</ul>
</div>
</div>
다음은 클래스의 CSS 끝입니다.
/* Image */
.image {
border-radius: 0.25em;
border: 0;
display: inline-block;
position: relative;
}
.image img {
border-radius: 0.25em;
display: block;
}
.image.left, .image.right {
max-width: 40%;
}
.image.left img, .image.right img {
width: 100%;
}
.image.left {
float: left;
margin: 0 1.5em 1em 0;
top: 0.25em;
}
.image.right {
float: right;
margin: 0 0 1em 1.5em;
top: 0.25em;
}
.image.fit {
display: block;
margin: 0 0 2em 0;
width: 100%;
}
.image.fit img {
width: 100%;
}
.image.main {
display: block;
margin: 0 0 3em 0;
width: 100%;
}
.image.main img {
width: 100%;
}
이렇게 할 수있는 한 가지 방법은 컨테이너 / 부모 태그 (예 : ".image")에 너비와 높이를 추가 한 다음 컨테이너 내부의 img 크기를 부모 요소의 100 %로 조정하는 것입니다.
.image {
border-radius: 0.25em;
border: 0;
display: inline-block;
position: relative;
width: 40vw;
height: 30vh;
overflow:hidden;
}
.image img {
display: block;
width: 100%;
height: 100%;
}
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다