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左右，然后开始拉伸图像。

这可能与纯css有关吗？

Answer 1

将背景应用于thumb-12标记是没有意义的。将其直接应用于您的容器（似乎是.thumb-12 { width: 100%; height: 700px; background: url('your_image.jpg') center center no-repeat; background-size: cover; }）并删除img标记。

height: 100%;

请注意，如果您希望body适用于所有浏览器，则此元素的父级必须具有确定的高度（除非所有父级具有相同的属性，直到{{1} }}）。

Answer 2

我在图片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;
}

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

2 个答案: