如何使用純CSS動態縮放每個高度的圖像？

Question

這一次出去的CSS優點：

我不知道是否有可能實現像使用純CSS this site一個圖像縮放行爲？

請注意，如果瀏覽器窗口的高度發生變化，圖像纔開始縮放，而不是其寬度。 （只是說因爲我發現網上的所有信息都是關於寬度的變化。）

真正的困難點似乎是不同的閾值：如果景觀形狀的圖像具有相同的高度，它們就開始縮小作爲已經縮小尺寸的肖像形狀圖像。

對此事的任何反饋都非常感謝！

Answer 1

您可以用max-height，min-height，white-space和%高度的結合做到這一點。唯一的缺點是每個圖像必須設置一個類來確定它是垂直還是水平。

http://jsfiddle.net/Rgp6h/

示例HTML：

<div> 
    <img src="http://placekitten.com/200/300" class="vert"/> 
    <img src="http://placekitten.com/500/200" class="horiz"/> 
    <img src="http://placekitten.com/200/300" class="vert"/> 
    <img src="http://placekitten.com/400/300" class="horiz"/> 
    <img src="http://placekitten.com/200/300" class="vert"/> 
</div> 

CSS：

body,html{ 
    height: 100%; 
} 

div{ 
white-space: nowrap; 
    height: 100%; 
} 

img{ 
    min-height: 200px; 
    height: 100%; 
    vertical-align: top; 
} 

.horiz{ 
    max-height: 300px; 
} 

.vert{ 
    max-height: 500px; 
} 

Answer 2

我認爲他們只是使用JavaScript來做到這一點，但您可以使用基於百分比的大小或媒體查詢（如有必要）。

.coolImg { 
    height: 50%; 
} 
@media all and (max-height: 600px) { 
    .coolImg { 
     height: 50%; 
    } 
} 

如果您分享了一些您如何嘗試這樣做的代碼，我們可以嘗試更具體地解決您的解決方案。