최대 너비를 사용하여 CSS에서 비례 적으로 이미지 크기 조정

최대 너비를 사용하여 CSS에서 비례 적으로 이미지 크기 조정

---

지금은 최대 너비를 사용하여 이미지 크기를 조정하고 있습니다. 그러나 비례 적으로 확장되지는 않습니다. 이런 일이 일어나도록하는 방법이 있습니까? Javascript / jQuery에 열려 있습니다.

가능하다면 이미지의 원래 크기를 모르고이를 수행 할 수있는 방법이 있습니까 (Javascript / jQuery를 사용하여 결정할 수 있음)?

---

원래 너비와 높이를 지정해야합니다.

<img src="/whatever" width="100" height="200" alt="Whatever" />

그런 다음 CSS에서 다음과 같이 사용하십시오.

#content img { max-width: 100%; height: auto }

너비와 높이가 앞에 있지 않은 경우 jQuery로 이것을 시도 할 수 있지만 마일리지는 다를 수 있습니다.

$(function(){
    $('#content img').load(function(){
       var $img = $(this);
       $img.attr('width', $img.width()).attr('height', $img.height());
    });
});

#content기능의 범위를 지정하려는 선택기로 분명히 바꿉니다 .

---

허용되는 답변과는 달리 HTML에 크기를 지정하지 않고도이 작업을 수행 할 수 있습니다. 모두 CSS에서 수행 할 수 있습니다.

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

---

일정한 폭 사용을 설정할 때 :

height: auto

---

Javascript없이 수행하는 방법은 다음과 같습니다. max-width원하는 길이로 설정하십시오 .

#content img { 
   max-width: 620px;
   height: auto;
}

이것은 img태그 에 너비 또는 높이 설정이 명시 적으로 설정되지 않았을 때 Firefox 28, Chrome 34 및 Safari 7이 설치된 Mac에서 테스트되었습니다 .

max-width한 사람이 제안한대로 설정 한 후 CSS에서 너비를 100 %로 설정하지 마십시오. 그러면 컨테이너 너비보다 좁은 이미지 (예 : 아이콘)가 원하는 것보다 훨씬 크게 날아갈 수 있습니다.

---

이미지의 너비와 최대 너비를 모두 사용하면 IE8이 망가집니다.

이미지에 너비를 넣고 최대 너비를 가진 div로 래핑합니다. (그런 다음 MS를 저주하십시오.)

---

다음 요구 사항으로이 작업을 수행해야했습니다.

1. 이미지가로드 될 때 페이지가 리플 로우되지 않아야합니다. 이미지 크기는 서버 측에 알려져 있으며 계산이 가능합니다.
2. 이미지는 비례 적으로 조정되어야합니다.
3. 이미지는 포함하는 요소보다 넓지 않아야합니다.
4. 이미지를 확대해서는 안되며 필요한 경우에만 축소해야합니다.
5. 이미지도 제대로 인쇄되도록 배경이 아닌 img 요소를 사용해야합니다.
6. JavaScript가 없습니다!

내가 생각 해낸 가장 가까운 것은이 끔찍한 장치입니다. 세 개의 요소와 두 개의 인라인 스타일이 필요하지만 내가 아는 한 이것이 이미지를 비례 적으로 조정하는 가장 좋은 방법입니다. height: auto;여기 에 제시된 모든 제안은 서버 측에서 이미지 크기를 지정하는 점을 무효화하고로드하는 동안 콘텐츠가 이동하도록합니다.

.image {
  position: relative;
}

.image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

<!-- container element with max-width prevents upscaling -->
<div class="image" style="max-width: 640px;">
  <!-- div with padding equal to the image aspect ratio to make
       the element the correct height -->
  <div style="padding-top: 75%;"></div>
  <!-- img scaled to completely fill container -->
  <img src="//placebear.com/640/480" />
</div>

https://jsfiddle.net/Lqg1fgry/6/- "Hello"가 있으므로 이미지 이후의 콘텐츠가 점프하는지 확인할 수 있습니다.

---

hopefully it is not too late , but with this pease of code i managed to get proportional images in my gallery. it will take time to understand what is going on but try it and enjoy.

<style>
div_base {
    width: 200px; // whatever size you want as constrain unchangeable
    max-width: 95%; // this is connected to img and mus exist
}
div_base img {
    width: auto !important;  // very important part just have it there!
    height: 95%;  // and this one is linked to maxW above. 
}
</style>

---

function resizeBackground() {
    var scale=0; 
    var stageWidth=$(window).width(); 
    var newWidth=$("#myPic").width();
    var stageHeight=$(window).height();
    var newHeight=$("#myPic").height();
    if( $(window).width() > $(window).height() )  {
        scale = stageHeight/newHeight;
        scale = stageWidth/newWidth;
    } else {
        scale = stageWidth/newWidth;
        scale = stageHeight/newHeight;
    }
    newWidth = newWidth*scale;
    newHeight = newHeight*scale
    $("#myPic").width(newWidth);
    $("#myPic").height(newHeight);
}

ReferenceURL : https://stackoverflow.com/questions/2076284/scaling-images-proportionally-in-css-with-max-width