image - 全宽、有限高度的图像，同时保持纵横比

Question

我正在尝试重新创建一个图像，使其看起来像这里的封面图像。图像必须是浏览器的全宽，但仍保持一定的固定高度。尽管如此，它仍然必须保持纵横比。

设置width: 100%; height: auto;使图像以正确的纵横比全宽。但是，高度是关闭的。如果我设置width: 100%; max-height: 300px;，纵横比就会丢失。

我确信这是可能的（见上面的链接），但我只是不知道如何得到这个结果。不胜感激一些指点！

Answer 1

您必须“剪切”超过固定高度的图像部分。所以将此样式设置为图像的父容器：

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

jsFiddle