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，请使用height

.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>

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

1 个答案: