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

브라우저 창과 함께 이미지 크기를 조정할 수있는 방법이 궁금합니다. 여기 에 지금까지 한 작업이 있습니다 (또는 전체 사이트를 ZIP 파일로 다운로드 ).

이것은 Firefox에서 잘 작동하지만 Chrome에서는 문제가 있습니다. 이미지의 크기가 항상 조정되는 것은 아니며 페이지가로드 될 때 창 크기에 따라 달라집니다.

이것은 Safari에서도 잘 작동하지만 때로는 이미지가 최소 너비 / 높이로로드됩니다. 아마도 이것은 이미지 크기 때문일 수 있지만 확실하지 않습니다. (올바르게로드되면 여러 번 새로 고침하여 버그를 확인하세요.)

이걸 어떻게 더 방탄하게 만들 수 있는지에 대한 아이디어가 있습니까? (자바 스크립트가 필요하다면 저도 함께 살 수 있지만 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에서 작동합니다 (내가 테스트 한 전부입니다).

2018 년 이후 솔루션 :

뷰포트 관련 단위를 사용하면 고양이 이미지가 있으므로 생활이 더 쉬워집니다.

이제 우리는 종횡비를 존중하면서이 고양이를 코드에 넣기를 원합니다.

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

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

지금까지는별로 흥미롭지 않지만 cats 너비를 뷰포트의 최대 50 %로 변경하려면 어떻게해야할까요?

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">

동일한 이미지이지만 이제 최대 너비 가 50vw vw (= 뷰포트 너비)로 제한된다는 것은 제공된 숫자에 따라 이미지가 뷰포트의 X 너비가됨을 의미합니다. 이것은 높이에도 적용됩니다.

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

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

이것은 이미지의 높이를 뷰포트의 최대 20 %로 제한합니다.

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

IE에서 onresize이벤트는 모든 픽셀 변경 (너비 또는 높이)에서 발생하므로 성능 문제가있을 수 있습니다. 자바 스크립트의 window.setTimeout ()을 사용하여 몇 밀리 초 동안 이미지 크기 조정을 지연합니다.

http://mbccs.blogspot.com/2007/11/fixing-window-resize-event-in-ie.html

resize 속성을 둘 다로 설정합니다. 그런 다음 다음과 같이 너비와 높이를 변경할 수 있습니다.

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

jQuery를 사용하고 있습니까?

jQuery 플러그에 대한 빠른 검색을 수행했고이 작업을 수행하는 플러그인이있는 것 같기 때문에이 플러그인을 확인하면 작동합니다.

http://plugins.jquery.com/project/jquery-afterresize

편집하다:

이것은 CSS 솔루션이며 style = "width : 100 %" 를 추가하고 최소한 크롬과 Safari에서 저에게 적합합니다. 나는 ie가 없으므로 거기에서 테스트하고 알려주십시오. 여기에 코드가 있습니다.

            <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>

처음에는 다음 html / css를 사용했습니다.

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

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

그런 다음 다음 과 같이 추가 class="img"했습니다 <div>.

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

그리고 모든 것이 잘 작동하기 시작했습니다.

CSS3 scale속성을 사용 하여 CSS로 이미지 크기를 조정할 수 있습니다 .

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

추가 읽기 :

• CSS3 2D 변환
• CSS3 호버 효과 전환, 변환, 애니메이션

이 코드를 사용하십시오. 가장 잊은 것은 이미지의 최대 너비로 최대 너비를 지정하는 것입니다.

img {   
    height: auto;
    width: 100%;
    max-width: 300px;
}

이 데모를 확인 하십시오 http://shorturl.at/nBKVY

시험

.img{
   width:100vw; /* Matches to the Viewport Width */
   height:auto;
   max-width:100% !important;
}

디스플레이 블록 및 인라인 블록에서만 작동하며, 방금 알아 내려고 노력하면서 시간을 보냈기 때문에 플렉스 항목에는 영향을 미치지 않습니다.