顯示圖像低於圖像

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/

圖像變成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/ - 調整窗格中看到