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

我正在努力使自己变得更好。顶部图像为浏览器的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左右，然后开始拉伸图像

---

这可以用纯css实现吗

将背景应用于img标记没有意义。将其直接应用于您的容器（看起来是thumb-12），然后移除img标签

.thumb-12 {
    width: 100%;
    height: 700px;

    background: url('your_image.jpg') center center no-repeat;
    background-size: cover;
}

---

请注意，如果您想要高度：100%，则此元素的父元素必须具有确定的高度；要在所有浏览器上工作，除非所有的父级都有相同的属性，直到body。

我在image div周围添加了一个wrapper div，并赋予它溢出：hidden和固定高度700px；在保持实际图像高度100%的情况下

---

@萨巴斯蒂安：也许是这样，但我认为你误解了这个问题。我需要它有一个最大高度，并保持它的比例。你的元素宽度必须保持比例或背景只？请看这个。我试图缩短顶部图像，以便底部两个图像的顶部可见。换句话说…100%的宽度和700px左右的高度，同时在浏览器延伸到1500px以上时保持纵横比。正如我所说，背景图像本身将保持这个比例。我编辑了我的答案，设置了一个固定的高度。事实上，如果你想让你的图像延伸到1500px以上，可以使用1500px宽的图像。cover属性使图像适应，直到占据所有空间。如果你的div超过1500，而你的图像也达到1500，它将像桌面背景一样伸展。

.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;
}