全寬，有限高度的圖像，同時保持長寬比

Question

我試圖重新創建一個圖像看起來像封面圖像here。圖像必須是瀏覽器的全部寬度，但仍保持一定的固定高度。儘管如此，它仍然必須保持寬高比。

設置width: 100%; height: auto;以正確的寬高比形成圖像全角。但是，高度已關閉。如果我設置了width: 100%; max-height: 300px;，則寬高比將丟失。

我相信這是可能的（請參閱上面的鏈接），但我無法弄清楚如何得到這個結果。會欣賞一些指針！

Answer 1

您必須「剪切」超過固定高度的圖像部分。所以這樣式設置爲圖像的父容器：

#image-container { height: 300px; overflow:hidden; } 

jsFiddle