background-size: contain 不显示背景图片的情况

Question

我从 MDN 中引用了 background-size，但不明白为什么当 CSS body { width: 800px; height: 800px; } 被注释掉时下面的代码片段不显示 iPhone 图像（当给出明确的 width/height 值时，它按预期工作）。当应用 body { width: 100%; height: 100%; } 或 body { width: auto; height: auto; } 时，图像不显示。

我希望 iPhone 图像在没有任何裁剪的情况下尽可能大地显示，我认为这与关于 background-size: contain 的描述相同。我假设它与 body 的宽度和高度有关，但我想完全了解发生了什么。

body {
  background-image: url("https://raw.githubusercontent.com/htcrefactor/momentum/main/images/apple-iphone-12-pro-max.webp");
  background-size: contain;
  background-repeat: no-repeat;
  background-color: black;
  width: 800px;
  height: 800px;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="./src/styles.css" />
    <title>Reminders</title>
  </head>
  <body>
  </body>
</html>

Answer 1

所以，这是正在发生的事情

如果您按百分比设置元素的高度，CSS 将查找元素的父亲以使用他的高度并计算元素的高度

如果父亲有特定的身高，它会计算并得到身高但是如果父亲的身高设置为自动（几乎所有html元素都是默认的）CSS无法计算身高！

假设您将 body 的身高设置为 50%，因此 CSS 应该将 body 的父亲（html）的身高乘以 50，然后除以result by 100，为什么不能完成这个任务？ b'Coz : 自动 * 50 / 100 = ???

但是如果 parent（html 在你的情况下）有一个特定的高度（假设它是 400px）CSS 可以很容易地计算出：

400 * 50 / 100 = 200px

这就是为什么 height:auto 和 height:100%

都不如您所愿

因为在这两种情况下，您的 body 的高度都设置为自动，而自动意味着您的 children 需要的大小（您的 body 是空的，对吗？所以高度将为 0)

但是当你说 height:800px 时，它会简单地与 body 的 children

无关

现在，如果您希望 body 获得与用户视口完全相同的大小您可以使用 vh 和 vw CSS 单位

首先，检查 https://caniuse.com 以查看您的目标设备是否支持这些单位

那你可以说

body{
    width: 100vw;
    height: 100vh;
}

这表示您的 body 元素应具有全部 100% 的视口宽度 (vw) 和视口高度 (vh)

注意：

background-size: contain;

将根据需要放大或缩小您的图像，以确保您的所有图像在 parent 中可见（同时保持 aspect-ration）

所以您的 body 元素的某些地方可能会变成白色并且没有背景（如果您的图像 aspect-ratio 不同于 body 的 aspect-ratio)

如果您希望所有 body html 都被图像覆盖，您应该使用

background-size:cover

而不是 contain 这可以像您提到的那样裁剪您的图像...

所以你需要做出选择如果您的图像 aspect-ratio 比图像的完整性更重要，那么封面就是解决方案否则（完整性比 aspect-ratio 更重要）您可以将 100% 用于 background-size 如果完整性和 aspect-ratio 都很重要并且 body 的某些部分加载为白色并且没有 background-image 是可以的，那么您已经通过使用 contain[=21 做出了最佳选择=]

Answer 2

我认为图像在扭曲时会消失，请尝试添加 1 个固定值和 1 个最大值并更改为背景而不是 background-image，我之前遇到过错误

body {
   background: url("https://raw.githubusercontent.com/htcrefactor/momentum/main/images/apple-iphone-12-pro-max.webp");
   background-size: contain;
   background-color: black;
   height: 800px;
   max-width: 800px
}

background-size: contain 不显示背景图片的情况

Conditions when background-size: contain doesn't display background-image

html

css

background-size