我正在尝试重新创建一个看起来像封面图像的图像here . 图像必须是浏览器的整个宽度，但仍保持一定的固定高度 . 尽管如此，它仍然必须保持纵横比 .
设置 width: 100%; height: auto; 使图像全宽，具有正确的宽高比 . 但是，高度是关闭的 . 如果我设置 width: 100%; max-height: 300px; ，则宽高比会丢失 .
width: 100%; height: auto;
width: 100%; max-height: 300px;
我确信它是可能的（见上面的链接），但我无法弄清楚如何得到这个结果 . 会不胜感激一些指针！
您必须“剪切”超出固定高度的图像部分 . 因此，将此样式设置为图像的父容器：
#image-container { height: 300px; overflow:hidden; }
jsFiddle
1 回答
您必须“剪切”超出固定高度的图像部分 . 因此，将此样式设置为图像的父容器：
jsFiddle