дисплей изображение при ширине 100% тогда и только тогда ширина DIV меньше фактической ширины изображения

Question

Это мой HTML:

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

Изображение становится 100% шириной того, что есть. Могу ли я сказать «Использовать исходную ширину изображения, если« 100% »(ширина контейнера) больше, чем исходная ширина изображения»?

Например, предположим, что ширина div составляет 50 пикселей, а исходная ширина изображения - 60 пикселей (ширина div динамически генерируется на основе размера экрана. Изображение определяется конечным пользователем). В этом случае ширина изображения должна быть 100%.

Однако, если ширина div составляет 70 пикселей, а исходная ширина изображения 60 пикселей, ширина должна оставаться неизменной.

Есть ли способ для достижения этой цели с помощью HMTL и CSS? Если нет, для достижения этого используется Django/Python?

Answer 1

Да. Это называется max-width:

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

http://jsfiddle.net/ro764g6o/1/ - изменить размер панели, чтобы увидеть