Question

我尝试了这些

*background-size: auto auto;
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  height: 50vh;*

问题是正在显示裁剪的图像，我希望显示整个图像。

Answer 1

在这里试试我使用了Unsplash的图片使用background-size: cover获取完整图片，并使用background-position: center

body {
  background: url('https://images.unsplash.com/photo-1531315630201-bb15abeb1653?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=600&q=60');
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  background-position: center;
}

让我知道它是否不适合您

Answer 2

您无法在所有设备/视口上完全显示完整的图像，因为它们的纵横比与图像的纵横比不同。

background-size: cover将覆盖视口，但保持宽高比，因此，例如，如果您的图像与视口高度相比非常宽，则某些图像将在侧面被裁剪。

如果按照问题所述的那样实际显示完整图像很重要，请使用background-size: contain，但是如果视口和图像的纵横比不同，这将在顶部或侧面显示空间。

要实际显示完整图像并覆盖整个视口，您可以设置background-size: 100% 100%;，但这通常并不令人满意，因为它将一维拉伸您的图像，或者使另一维适合您的图像，这会使它看起来有些奇怪。大多数情况下。

如何在背景上渲染整个图像？

2 个答案: