CSS背景图像高度自动被裁剪

【问题标题】：CSS background image height automatically getting croppedCSS背景图像高度自动被裁剪
【发布时间】：2020-10-20 21:28:49
【问题描述】：

.bg-image {
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-position: center center;
}

这是我用来为 div 设置背景图像的 CSS 代码。我面临的问题是图像高度在达到特定的屏幕宽度（设备尺寸）时会自动被裁剪。我该如何解决这个问题？

【问题讨论】：

没有设置background-image 属性。请包括minimal reproducible example，除了 CSS 之外还包含 HTML。您可以使用来自占位符或虚拟图像服务的图像。您可以使用Stack Snippets（工具栏中的图标类似于<>）。
我在 html 上设置 background-image 如下
请edit您的问题包括minimal reproducible example。

标签： html css css-selectors

【解决方案1】：

您应该改用background-size: contain;。但在这种情况下，上下或左右都有空白空间，具体取决于图像容器是否具有响应性和图像纵横比的屏幕分辨率。

【讨论】：

【解决方案2】：

如果您希望背景图像尽可能多地占用空间而不被裁剪，您可以像 Merianos 所说的那样使用它：

.bg-image {
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-position: center center;
  background-size: contain;
}

但如果您需要指定确切的宽度和高度，您可以使用百分比或像素的相同属性。

    .bg-image {
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-size: cover;
      background-position: center center;
      background-size: 100px 100px;
    }

【讨论】：