使用媒体查询调整背景图像的大小，以随着浏览器窗口和居中而缩小

Question

>我正在尝试建立一个使用Bootstrap 4背景图像的网站。 我希望图像调整大小，但不幸的是，当它到达断点时，它聚焦在图像的不同点上，而不是真正使图像居中。 我应该通过 photoshop 使用调整大小的图像还是通过 css 调整图像大小/缩小图像来调整图像大小。 即如何让背景图像保持在屏幕中心。以下媒体查询代码示例：(初始图像大小为 2000px x 1333px。 谢谢！

.landpage-img {
background: url(../img/bg-neon-01-2000x1333.jpg) no-repeat center center fixed;
}

Answer 1

您可以进行父查询

.parent {
width: 100%;
position:relative;
}

和

.landpage-img {
position:absolute;
left: 50%;
transform: translateX(-50%);
}

您的图像将位于 parrent 选择器的中间。

Answer 2

您可以使用background-size: cover;或background-size: contain;。

这样：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style>
.landpage-img {
background: url(https://picsum.photos/2000/1333) no-repeat center center fixed;
background-size: cover;
}
</style>
<div class="container-fluid landpage-img" style="height: 100vh">
<div class="row">
<div class="col">
Some content goes here
</div>
</div>
</div>

background-size: contain;保持图像的比例，而background-size: cover;设计为完全覆盖所有内容，即使图像需要稍微裁剪。因此，您可能希望在大多数时间使用background-size: cover;。