Html 背景图像和屏幕大小：如何正确操作？

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

是否有首选的图像大小

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

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

小屏幕

大屏幕

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

如何解决这个问题

该图像来自，我没有调整它的大小

---

感谢您的帮助。

这里的问题是您的背景区域的纵横比几乎为

4:1

，非常宽。然而，图片的纵横比几乎为

4:3

这就是为什么它在大屏幕上会成为一个问题。这幅画不够宽

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

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

这就是我要做的：

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

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

background size:cover

属性将图片设置为始终适合其在容器内的整个宽度（如果不适合，则高度将被截断）

---

背景位置：50%50%

将背景设置为始终居中。这样，如果背景被切断，您仍然可以看到图片的中心，这可能是图片中最有趣的部分。

谢谢您的解释，这张图片效果更好，但我尝试了另一张，但效果不太好：所以问题主要是这些图片的尺寸不适合区域的尺寸，对吗？我必须找到/使图片更宽，可能在每一侧使用渐变来填充空白，如果这是可能的，而不会看起来很奇怪..？这取决于图片。默认情况下，带有马的图片是非常放大的图片，因此很难将其用作背景。但是，如果您希望看到尽可能多的马，可以使用

背景位置：50%100%

。这会将位置设置为底部。如果您愿意，可以尝试一下，您可以阅读更多关于“谢谢帮助”上的

背景位置

属性的信息。