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

Question

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

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

Answer 1

您应该使用background-size: contain; 反而。 但在这种情况下，如果图像容器具有响应性和图像纵横比，则顶部和底部或左侧和右侧将有空白空间，具体取决于屏幕分辨率。

Answer 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;
    }