调整大小时如何设置背景图像以适应浏览器窗口？答案

【问题标题】：How to set the background image to fit the browser window when it is resize?调整大小时如何设置背景图像以适应浏览器窗口？
【发布时间】：2021-04-16 01:14:46
【问题描述】：

我正在构建一个小型响应式页面。在一个页面上有一个背景图片，上面有很多按钮。

我添加了以下css来设置背景图片

.background{
    height: 100vh;
    width: 100%;
    background: url('https://images.pexels.com/photos/1563564/pexels-photo-1563564.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260') no-repeat;
    background-size: cover;
}

我的问题是，当我调整浏览器窗口的大小时，按钮会垂直堆叠，然后用户可以导航到背景图像结束的底部，然后用户可以看到一个很大的空白区域。

我希望背景图像在调整大小时调整大小以适合浏览器窗口。

有什么想法吗？

编辑：我在没有帮助的情况下尝试了您的建议。我将代码放在 StackBlitz 页面中： https://stackblitz.com/edit/angular-y1avtu?file=src%2Findex.html

调整窗口大小，您将看到垂直堆叠的按钮，然后向下滚动，您将看到网页的一大块白色部分。这是我不想要的。

【问题讨论】：

将width: 100%; 更改为width: 100vw;

标签： html css angular responsive

【解决方案1】：

更新你的CSS如下:)。

.background{
    height: 100vh;
    width: 100%;
    background: url('https://images.pexels.com/photos/1563564/pexels-photo-1563564.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260') no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

【讨论】：

【解决方案2】：

不是 100% 确定，但如果图像是固定的并设置为页面的宽度和高度，并且背景大小设置为覆盖，当用户滚动时，背景将保持静止，您不必担心关于底部的空白。

【讨论】：

【解决方案3】：

移除宽度：100%；从风格上点击展开sn-p链接查看真实结果

.background{
     
    height: 100vh;
    
    background: url('https://images.pexels.com/photos/1563564/pexels-photo-1563564.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260');
  background-repeat: no-repeat;
    
background-size: cover;
}

<div class='background'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</div>

【讨论】：