Question

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

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

我确信这是可能的（见上面的链接），但我无法弄清楚如何得到这个结果。会不胜感激一些指点！

Answer 1

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

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