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

브라우저 너비 / 높이가 변경 될 때 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 년 솔루션 :

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

Now we want this cat inside our code, while respecting aspect ratios:

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

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

So far not really interesting, but what if we would like to change the cats height to be the maximum of 50% of the viewport?

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

The same image, but now restricted to a maximum width of 50vw vw (=viewport width) means the image will be X width of the viewport, depending on the digit provided. This also works for height:

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

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

This restricts the height of the image to a maximum of 20% of the viewport.

---

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

In IE onresize event gets fired on every pixel change (width or height) so there could be performance issue. Delay image resizing for few milliseconds by using javascript's window.setTimeout().

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

---

Set the resize property to both. Then you can change width and height like this:

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

---

Are you using jQuery?

Because I did a quickly search on the jQuery plugings and they seem to have some plugin to do this, check this one, should work:

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

EDIT:

This is the CSS solution, I just add a style="width: 100%", and works for me at least in chrome and Safari. I dont have ie, so just test there, and let me know, here is the code:

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

---

You can use CSS3 scale property to resize image with css:

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

Further Reading:

• CSS3 2D Transforms
• CSS3 Hover Effect Transitions, Transformations, Animations

---

Initially, I was using the following html/css:

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

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

Then I added class="img" to the <div> like this:

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

And everything started to work fine.

참고 URL : https://stackoverflow.com/questions/4684304/how-can-i-resize-an-image-dynamically-with-css-as-the-browser-width-height-chang