我如何知道可变高度内容的背景图像的大小？

Question

我想不出一个好的标题，抱歉。

我正在设计一个个人网站，其中包含 4 个主要部分。每个部分里面都有一个标题和一个网格。每个部分的背景都是一张图片。我正在拍摄非常大的图像并将它们裁剪为正确的纵横比、缩放它们，然后将它们分配到适当的部分。

目前，我正在为移动设备进行设计，但我确信这个问题在不同的屏幕尺寸中无处不在。我的问题是，当我设置图像的宽度和高度，然后在不同的设备（例如 iPhone X 到 Pixel XL）上进行检查时，背景图像之后的部分底部有一个空格。这是因为图片太短了。

我想过让图像足够高以容纳最高的设备，但我遇到了这个问题：在最大的设备上内容并不总是最高的。所以我想这可以归结为：

How do I know how large to make my images?

我是否必须查看每台设备上内容的尺寸并选择最大的？应该有更好的方法吧？我不想将图像缩放到背景的 100% 的原因是为了保真度（它会有所作为！）。

希望这是足够的信息，如果不是，我会在附近。谢谢！

编辑澄清：

也许我不是很清楚。我将对更大的屏幕尺寸使用媒体查询，我将在其中使用更大的图像。这是一个澄清的例子：

假设我的第一个断点最大为 568 像素。有一系列设备低于此值。但是，仅仅因为它们落入相同的断点并不意味着它们具有相同的高度和宽度。

假设设备 A 的宽度为 320 像素，高度为 600 像素，设备 B 的宽度为 400 像素，高度为 650 像素。在设备 A 上，我网站的第一部分宽 320 像素，高 800 像素。在设备 B 上，我网站的第一部分宽 400 像素，高 750 像素。

我可以制作 400 像素宽和 800 像素高的图像，这将满足两种设备的背景条件。但是，我实际上无法遍历所有存在的设备来找到特定部分的最大宽度和特定部分的最大高度。我也不能确定我的内容不会改变，在这种情况下我必须重复这个过程。

有没有一种方法可以做到这一点，而不会损失图像的质量，不会删减内容，并且在元素周围保持合理的相同填充和边距？还是我想错了？

希望这有助于澄清它。感谢我已经收到的答案！

编辑解决方案： 最终手动设置每个部分的大小。我的间距有点混乱，但现在我知道断点下所有设备的高度和宽度，因为它将是相同的。

Answer 1

感谢现在 CSS3 中的 background-size 属性，我们可以完全通过 CSS 来做到这一点。我们将使用html 元素（比body 更好，因为它始终至少是浏览器窗口的高度）。我们在其上设置了一个固定且居中的背景，然后使用设置为封面关键字的background-size 调整其大小。

html { 
  background: url(XXX) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

注意：将您的 URL 复制到 XXX 区域，例如：images/bg.jpg。然后将上述内容复制并粘贴到您的 CSS 样式表中。

适用于：
- Safari 3+
- 铬随便+
- IE 9+
- 歌剧 10+
- 火狐 3.6+

希望这会有所帮助。

Answer 2

您可以在 CSS 中使用 @Media Queries 来完成此操作。

如果是更大的屏幕——比如电脑。你可以让你的普通 CSS 显示你的背景图片。随着屏幕尺寸的变化，并且您注意到在特定的屏幕尺寸（如手机屏幕）下图像看起来不正确，您可以向您的 CSS 添加媒体查询，如下所示：

@media only screen and (max-width: 600px) {
  body {
    background-image: url("IMAGEURL.jpg");
  }
}

在最大宽度等于或小于 600 像素的设备上，CSS 将覆盖您的主 CSS。这就是响应式网站一直以来的构建方式。您可以根据需要进行尽可能多的媒体查询。还有其他方法可以编写媒体查询。希望这能回答您的问题！

查看在 W3schools 找到的本教程。 https://www.w3schools.com/cssref/css3_pr_mediaquery.asp