이미지를 표시이 내 HTML되는 화상

Question

의 실제 폭보다 작 :

<div> 
    <img src='image.png'> 
</div> 

이 내 CSS입니다 :

img { 
    width: 100%; 
    color: orange; 
    background-color: orange; 
} 

div { 
    width: 200px; 
    height: 500px; 
    border: 1px solid black; 
} 

바이올린 : http://jsfiddle.net/ro764g6o/

이미지는 div의 너비의 100 %가됩니다. " '100 %'(컨테이너 너비)가 원래 이미지 너비보다 큰 경우 이미지의 원래 너비를 사용하는 방법이 있습니까?

예를 들어 div의 너비가 50px이고 이미지의 원래 너비가 60px라고 가정합니다 (div의 너비는 화면 크기에 따라 동적으로 생성됩니다. 이미지는 최종 사용자가 결정합니다). 이 경우 이미지 너비는 100 %이어야합니다.

그러나 div의 너비가 70px이고 이미지의 원래 너비가 60px이면 너비는 동일하게 유지되어야합니다.

어쨌든 HMTL과 CSS를 사용하여 이것을 달성 할 수 있습니까? 없다면, Django/Python을 사용하여이를 수행 할 수 있습니까?

Answer 1

예. max-width라고 :

img { 
    max-width: 100%; 
    /* ... */ 
} 

http://jsfiddle.net/ro764g6o/1/ - 창 크기를 조정, 또한