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;。

使用媒体查询调整背景图像大小以缩小浏览器窗口并保持居中

2 个答案: