CSS横幅图像，不会缩放到父元素之外

我正在尝试为网站设计一个特殊横幅图像，以便对于较窄的视口，垂直高度得以保持，并且图像通过超越而有效地保持相同的大小父元素水平。（我认为这是相当典型的横幅图片行为 - 但如果我错了，随时纠正我）。（浏览器目标是ie10及以上）。下面不正确地保持图像比例和100％宽度，以便如果未能匹配父级的高度。CSS横幅图像，不会缩放到父元素之外

当前HTML只是div标签

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

在哪里使用的CSS类是内一个img：

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

和IMG-流体是自举（4）类

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

来源

2017-10-05 Yunti

“较窄的视口”意味着您有一些媒体查询CSS用于较小的屏幕。那个CSS在哪里？而且，扩展到左/右边缘之外将需要完全不同的CSS。 –

您的'.banner'的宽度为100％，这意味着它将跨越其容器的100％宽度。您的图片的最大宽度为100％，高度自动（默认），这意味着您的图片将跨越其父项的最大100％宽度。所以它表现得像编码一样，它将是100％宽度和高度自动。它永远不会离开它的容器 – Huangism

改为使用背景图像，可以使用一些有趣的行为来实现不同的结果。

这是我的看法：

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

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

来源

2017-10-05 15:37:33 Salketer

感谢您为我提供的内容添加了“背景位置：中心”。你目前的方式只显示图像的左侧部分而不是中心，这是我所需要的。 – Yunti

CSS横幅图像，不会缩放到父元素之外

回答

相关问题