[css] 브라우저 너비 / 높이가 변경 될 때 CSS를 사용하여 이미지의 크기를 동적으로 조정하려면 어떻게해야합니까?

이것은 순수한 CSS로 수행 할 수 있으며 미디어 쿼리도 필요하지 않습니다.

이미지를 유연하게 만들려면 max-width:100%및 height:auto. 이미지 max-width:100%와 height:autoIE7에서 작동,하지만 IE8에서 (예, 다른 이상한 IE 버그). 이 문제를 해결하려면 width:auto\9IE8 에 추가해야합니다 .

출처 : http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

CSS :

img {
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
}

이미지의 고정 된 최대 너비를 적용하려면 컨테이너 내부에 배치하기 만하면됩니다. 예를 들면 다음과 같습니다.

<div style="max-width:500px;">
    <img src="..." />
</div>

여기에 JSFiddle 예제가 있습니다 . JavaScript가 필요하지 않습니다. 최신 버전의 Chrome, Firefox 및 IE에서 작동합니다 (내가 테스트 한 전부입니다).

답변

img {
  width: 100%;
  height: auto;
}

<img src="https://www.petmd.com/sites/default/files/petmd-cat-happy-10.jpg" alt="cat">

img {
  width: 100%;
  height: auto;
  /* Magic! */
  max-width: 50vw;
}

<img src="https://www.petmd.com/sites/default/files/petmd-cat-happy-10.jpg" alt="cat">

img {
  width: auto;
  height: 100%;
  max-height: 20vh;
}

<img src="https://www.petmd.com/sites/default/files/petmd-cat-happy-10.jpg" alt="cat">

window.onresize = function(){
    var img = document.getElementById('fullsize');
    img.style.width = "100%";
};

.classname img{
  resize: both;
  width:50px;
  height:25px;
}

            <div id="gallery" style="width: 100%">
                <img src="images/fullsize.jpg" alt="" id="fullsize" />
                <a href="#" id="prev">prev</a>
                <a href="#" id="next">next</a>
            </div>

img {
  max-width: 100%;
  height: auto;
  width: auto\9; /* ie8 */
}

<div>
  <img src="..." />
</div>

<div class="img">
  <img src="..." />
</div>

.image:hover {
  -webkit-transform:scale(1.2);
          transform:scale(1.2);
}
.image {
  -webkit-transition: all 0.7s ease;
          transition: all 0.7s ease;
}