'div'컨테이너에 맞게 이미지 크기를 자동으로 조정하는 방법

 

질문 : 'div'컨테이너에 맞게 이미지 크기를 자동으로 조정하려면 어떻게합니까?

---

너비 : 높이 비율을 유지하면서 더 작은 너비 div 컨테이너에 맞도록 큰 이미지의 크기를 자동으로 조정하는 방법은 무엇입니까?

예 : stackoverflow.com-이미지가 편집기 패널에 삽입되고 이미지가 너무 커서 페이지에 맞지 않으면 이미지 크기가 자동으로 조정됩니다.

답변

---

이미지 태그에 명시적인 너비 또는 높이를 적용하지 마십시오. 대신 다음을 제공하십시오.

max-width:100%;
max-height:100%;

또한 height: auto; 너비 만 지정하려는 경우.

예 : http://jsfiddle.net/xwrvxser/1/

 

img {
    max-width: 100%;
    max-height: 100%;
}

.portrait {
    height: 80px;
    width: 30px;
}

.landscape {
    height: 30px;
    width: 80px;
}

.square {
    height: 75px;
    width: 75px;
}

Portrait Div
<div class="portrait">
    <img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>

Landscape Div
<div class="landscape">
    <img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>

Square Div
<div class="square">
    <img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>

출처 : https://stackoverflow.com/questions/3029422/how-do-i-auto-resize-an-image-to-fit-a-div-container