背景不会垂直调整大小

Question

我正在尝试建立一个网站，但我希望图像（1920×1080）可以覆盖整个页面。我用过：

background-repeat: no-repeat;
background-size: 100%;

看起来不错。但是，当我调整浏览器的大小并将其垂直拉下时，图像就没有了。我想例如在以下站点上调整图片大小：https://www.okainsbayseafood.co.nz/（当垂直调整浏览器大小时，图像会随之变化）

对不起，我的英语，如果我听起来很蠢

my webpage

Answer 1

将background-size从100%切换到cover：

background-size: cover;

这告诉浏览器图像应填满可用空间，并会改变图像的尺寸来这样做。

注意：可用空间可能不是浏览器窗口-如果将图像作为背景添加到不是body标签的元素上，则可能需要添加其他CSS。

Answer 2

实际上，您有很多可能得到这样的结果：

您在上面链接的页面使用了所谓的断点，它会根据屏幕尺寸加载调整大小的图像。在那种情况下，这确实是一个好主意，因为它们使用非常大的图像，这些图像将永久加载在小屏幕和低带宽上。

对您来说，作为一个初学者，最好先更深入地了解CSS以及仅使用一张图像即可完成的工作，然后选择像上面的网站那样进行优化。因此，对您而言，类似的事情可能会起作用：

background-image: url("yourimage.jpg");
background-color: #cccccc; /* Used if the image can not be loaded */
height: 100vh; /* You must set a height. (unless you have child elements that take the entire space) */
background-position: center;
background-repeat: no-repeat;
background-size: cover; /* Resize the background image to cover the entire container */

研究该CSS代码，并确保您了解它的作用以及其他选择。您可能会在那里玩一些值并获得其他结果。