Question

我遇到的问题是，在CSS中使用“contains”会在顶部图像和下一段之间增加一个巨大的间距。当我使用“封面”时没有间距问题，但图片宽度太高。

我在CSS中使用它

.headerLine{
position: relative;
width: 100%;
overflow: hidden;
height: auto;
background-repeat: no-repeat;
background-position: center top;
background-image: url(../images/bgTop.jpg);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: contain;

我为100％桌面上传图片，使用封面，使用包含和一个用于希望的结果：Description

Answer 1

您是否考虑将图片包含为<img>而不是背景图片？这将导致headerLine div动态更改高度以匹配子图像。

HTML：

<div class="headerLine">
    <img src="sampleimg.jpg" alt="Sample Image" width="600" height="200">
</div>

CSS：

.headerLine img {
    display: block;
    width: 100%;
    height: auto;
}

关于W3学校的背景规模：

背景封面：

将背景图像缩放为尽可能大背景区域完全被背景图像覆盖。一些部分背景图像可能不在背景中定位区域背景封面将缩放图像

背景包含：

将图像缩放到最大尺寸，使其宽度和宽度均匀高度可以适合内容区域

缩放背景图像宽度（CSS）的问题

1 个答案: