圖像自動適合容器的身高和體重

Question

我發現很好的jquery插件，自動縮放圖像到容器上的瀏覽器屏幕的重量。但我需要通過身高來縮放。任何想法如何用jQuery或css來做到這一點？謝謝。

示例（僅由重量比例）

jsfiddle.net/nottrobin/9Pbdz/

Answer 1

通過在圖像元素上設置100％的寬度，瀏覽器會自動處理高度比例。無需任何JS或明確的高度設置。

img { 
    width: 100%; 
} 

您可以通過父元素上設置明確的高度，然後設置高度達到同樣的自動縮放「高度方向」：100％;在嵌套的圖像元素上。不要在圖像上設置寬度以保持其比例。

div { 
    height: 100px; 
} 
img { 
    height: 100% 
} 

http://jsfiddle.net/9Pbdz/84/

---

動態圖像高度可以按照相同的原理來實現。以下是一個基於窗口高度給出父元素動態高度的示例。然後圖像填充其父項的高度並適當縮放。

http://jsfiddle.net/9Pbdz/85/

---

這應該讓你接近一個完整的例子：

http://jsfiddle.net/9Pbdz/92/

Answer 2

設置DIV含有專門的身高和體重，然後設置css類的尺寸圖像的高度：100％和寬度：100％