css - 图像和内容之间的差距随着背景大小的增加而不断增加

Question

.header-img {
    background-image: url("https://cdn.pixabay.com/photo/2016/04/15/04/02/water-1330252__340.jpg");
    background-size: contain;
    background-repeat: no-repeat;
    height: 300px;
}

随着我减小浏览器窗口的大小，图像会缩放并且图像和内容之间的差距会不断增加。 我需要解决这个问题，我需要保持背景大小。

<div class="header-img">
</div>

<div class="content">
sddsfsdfsdfdsfdsf
</div>

https://jsfiddle.net/dz47c1qn/

Answer 1

如果您希望图像保持原始高度，请使用background-size: cover

.header-img {
	background-image: url("https://cdn.pixabay.com/photo/2016/04/15/04/02/water-1330252__340.jpg");
	background-size: cover;
	background-repeat: no-repeat;
    height: 300px;
}

<div class="header-img">
</div>

<div class="content">
sddsfsdfsdfdsfdsf
</div>