css - 如何保持最大宽度和固定高度的比例？

Question

我正在尝试制作 something like this .顶部图像是浏览器的 100% 宽度，但比浏览器的 100% 高度短，因此内容会稍微向上窥视(下面两个图像的顶部显示)。

此外，当缩放浏览器大小时，它会保持其宽高比并且两个图像始终显示，除非响应断点 @media only screen and (min-width:768px) 具有所有图像堆叠在一起。

这是我的CSS:

.thumb-12 {
    width: 100%;
    height: 100%;
    position: relative;
}
.thumb-12 img {
    width:100%;
    height: 100%;
    max-height:700px;
    background-position:center center;
    -webkit-background-size:cover;
    -moz-background-size:cover;
    -o-background-size:cover;
    background-size:cover;
    background-repeat:no-repeat;
    z-index:100;
}

在宽度超过 1500px 左右之前，它一直有效，然后它开始拉伸(stretch)图像。

这可能与纯 css 相关吗？

Answer 1

我在图像 div 周围添加了一个包装 div，并给它 overflow:hidden 和 700px; 的固定高度，同时保持实际图像的高度 100%;

.thumb-wrapper {
    max-height: 700px;
    overflow: hidden;
}
.thumb-12 {
    width: 100%;
    height: 100%;
    position: relative;
}
.thumb-12 img {
    width:100%;
    height: 100%;
    height: auto;
    background-position:center center;
    -webkit-background-size:cover;
    -moz-background-size:cover;
    -o-background-size:cover;
    background-size:cover;
    background-repeat:no-repeat;
    z-index:100;
}