Question

我尝试为网站设置典型横幅图片的样式，以便对于较窄的视口，保持垂直高度，并且通过水平超出父元素，图像有效地保持相同的大小。（我认为这是相当典型的横幅图像行为 - 但如果我错了，可以随意纠正我）。（浏览器目标是ie10及以上）。下面错误地保持图像比例和100％宽度，以便如果不匹配父级的高度。

当前的html只是div标签内的img

<div class="banner">
 <img class="img-fluid" src="somepic.jpg" />
</div>

使用的css类是：

.banner {
    content: "";
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    height: 780px;
}

和img-fluid是一个带

的bootstrap（4）类

img-fluid {
    max-width: 100%;
    height: auto;
}

Answer 1

使用背景图片，有一些有趣的行为可用于实现不同的结果。

这是我的看法：

.banner {
    content: "";
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    height: 780px;
    background-image:url('somepic.jpg');
    background-size:cover;
}

这里的关键是background-size:cover;，它将确保图像在保持其比例的同时伸展以覆盖整个宽度和高度。这意味着在非常宽的屏幕上，它会变得更大，削减一些高度。但是在更薄的分辨率下，您将获得所需的输出。

CSS横幅图片，不会超出父元素

1 个答案: