背景图像被剪掉，或添加了滚动条答案

【问题标题】：Background image gets cut out, or a scroll bar gets added背景图像被剪掉，或添加了滚动条
【发布时间】：2021-06-24 03:48:49
【问题描述】：

我正在使用以下代码为我的 HTML 设置背景图片：

body {
  margin: 0;
  background: url('images/lightning.jpg') no-repeat center center fixed; 
  background-size: cover;  
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
}

但图像并没有完全显示在屏幕上，所以我尝试了以下解决方案： https://jsfiddle.net/507w9yoa/ 也不好用。

有人可以帮我设置背景图像而不添加滚动条或切断图像吗？我已经尝试了所有可用的解决方案 here 和其他网站，但似乎没有任何效果。

【问题讨论】：

首先，每个浏览器（甚至 IE）都支持 background-size 属性。大约8年不需要任何前缀cinse。而不是cover 我们contain。 background-size: contain; 将使图像保持其纵横比但不裁剪。
background-size: contains 可能是您想要的，但对于背景图像，它在具有非常不同纵横比的不同视口上可能看起来很奇怪（例如，它是整个页面的背景）。是你想要的吗？
@tacoshy 和 @A Haworth，我希望我的图像也能填满屏幕。
如果您希望图像填满屏幕而不是被剪切，它将被拉伸。因此，它将无法保持其纵横比，并且可能看起来很奇怪。如果视口和图像的纵横比不同，从逻辑上讲，您无法在不使图像变形的情况下实现全覆盖。

标签： html css image background background-image

【解决方案1】：

包含

contain 将保持纵横比并垂直或水平适应屏幕。它不会裁剪图像，因此不会填充整个背景，除非纵横比完全相同。

body {
  margin: 0;
  background: url('https://www.tacoshy.de/Images/Yoshi/IMAG0735.jpg') no-repeat center center fixed;
  background-size: contain;
}

【讨论】：

它没有填满屏幕

【解决方案2】：

试试这个：我只是在背景尺寸中使用了 2 个不同的单位，现在图像适用于屏幕尺寸，图像不会被裁剪并填满屏幕。我尝试了不同的屏幕，对我来说效果很好。

body {
  background: url('https://i.postimg.cc/1tcWpbZY/pexels-plato-terentev-5822191.jpg');
  background-repeat: no-repeat;
  background-size: 100% 100vh;
}

【讨论】：