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

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

我在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%桌面上传了图片，使用了封面、包含和一个，以获得预期的结果：

您是否考虑过将图像作为

而不是背景图像？这将导致headerLine div动态更改高度以匹配子图像

HTML:

关于W3学校的背景尺寸：

背景封面：

缩放背景图像，使其尽可能大，以便 背景区域被背景图像完全覆盖。一些 部分背景图像可能在背景中看不到 定位区域背景盖将缩放图像

背景资料包括：

将图像缩放到最大大小，以使其宽度和宽度 高度可以放在内容区域内

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

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