圖片比例調整大小

Question

這是fiddle。

沒有與display:block;和max-width:100%;一個非標準把戲響應圖片：

img { 
    display: block; 
    max-width: 100%; 
} 

如果我調整了容器的寬度，我的形象適合這個寬度，並自動調整它自己的高度。這是非常偉大的圖像行爲！它也不使用Javascript。

那麼，是否有可能通過調整容器的高度來實現相同的技巧？我希望這個圖像適合容器高度，並且也會按比例自動調整它自己的寬度。當然，沒有任何Javascript，只是CSS或任何實驗CSS3功能（我知道如何用Javascript做到這一點，真的）。

Answer 1

添加

max-height: 100%; 

另外，儘量不要與桌子的工作 - 他們的行爲（更）不可預測比其他的顯示類型。

查看here最基本的例子。

編輯：無法找到一種方法來做到這一點沒有JS。我在here中爲你提供了兩種方法 - 兩種方法都可以輕鬆使用（我已經使用了jQuery，但是你不需要）。如果這還不夠，比運氣好。