背景图片和屏幕大小：如何正确地做到这一点？

Question

无论屏幕大小如何，如何很好地显示背景图像？

是否有首选的图像尺寸？

我正在尝试新的CSS3背景大小属性（封面），但我无法得到适合小屏幕和大屏幕的结果。我也尝试了不同的媒体查询，但它没有用。

我是否必须为不同的屏幕创建多个版本的图像？

小屏幕

大屏幕

正如您所看到的，在大屏幕上，它就像放大了一样，因此它不再显示图片的主要部分。

如何解决这个问题？

图片来自unsplash，我没有调整大小。

感谢您的帮助。

Answer 1

这里的问题是你的背景区域的纵横比几乎为4:1，非常宽。然而，该图片的宽高比几乎为4:3。

这就是为什么它在大屏幕中成为一个问题。图片不够广泛。

对此有不同的解决方案，例如，您可以将图片拉伸以适合任何宽度。但这可能不是理想的行为。

这就是我要做的事情：

Demo - 尝试调整窗口大小以查看行为。

div {
  width: 100%;
  height: 500px;
  background-image: url('...');
  background-size: cover;
  background-position: 50% 50%;
}

background-size: cover属性将图片设置为始终适合容器内的整个宽度（但如果高度不合适则会被切断）。

background-position: 50% 50%将背景设置为始终居中。这样，如果背景中断，您仍然会看到图片的中心，这可能是图片中最有趣的部分。