如果未定义高度，为什么 background-size contains 在 HTML 或 BODY 上不起作用，但 background-size cover 有效？答案

【问题标题】：Why does background-size contain not work on HTML or BODY if height is not defined, but background-size cover works?如果未定义高度，为什么 background-size contains 在 HTML 或 BODY 上不起作用，但 background-size cover 有效？
【发布时间】：2023-03-13 15:31:02
【问题描述】：

* {
margin:0;
padding:0;
}

body {
    background-image: url(https://media.architecturaldigest.com/photos/5da74823d599ec0008227ea8/16:9/w_2560%2Cc_limit/GettyImages-946087016.jpg);
    background-size: contain;

}

<html>

<body>


</body>


</html>

在本例中，当 background-size 设置为 'contain' 时，不显示背景图像。

请注意，我知道如果我将 body 的 padding 设置为 10px 或 20px，则 background-image 将显示为 padding 的大小。我不明白为什么？

* {
    margin:0;
    padding:0;
}

 body {
    background-image: url(https://media.architecturaldigest.com/photos/5da74823d599ec0008227ea8/16:9/w_2560%2Cc_limit/GettyImages-946087016.jpg);
    background-size: cover;
}

<html>

<body>


</body>


</html>

在此示例中，背景大小设置为“覆盖”，并显示整个图像。如果没有定义高度，为什么“包含”不起作用，为什么它可以与填充一起使用，以及为什么尽管没有定义高度，但它对“覆盖”起作用？

【问题讨论】：

因为background-size: contain 将图像在其容器中尽可能大地缩放，而无需裁剪或拉伸图像。
您使用的是哪个浏览器 - 我在不同的浏览器上得到不同的结果（运行代码时不通过 sn-ps）。
@Adhitya Cover 做了类似的事情，然而，即使没有在 body 上定义尺寸，图像也会显示？
@AHaworth 我正在使用 Chrome。版本 87.0.4280.88（官方版本）（64 位）。你得到什么样的结果？
我猜 cover 与 contain 不同。如果contain 没有拉伸图像，则使用拉伸图像“覆盖”。 cover 被完全覆盖或contain完全可见

标签： html css

【解决方案1】：

原因是在这两种情况下，html 元素（和 body）元素的高度都等于 0，宽度等于 屏幕宽度。

包含总是考虑最小的维度，而覆盖总是考虑最大的维度。

让我们以一个经典元素为例来看看发生了什么：

.box {
  height: 5px;
  border: 1px solid;
  margin:5px;  background:url(https://media.architecturaldigest.com/photos/5da74823d599ec0008227ea8/16:9/w_2560%2Cc_limit/GettyImages-946087016.jpg) center no-repeat
}

<div class="box" style="background-size:contain"></div>
<div class="box" style="background-size:cover"></div>

我拍摄了一个高度较小的 div，使用contain 时您可以清楚地看到图像有多小，但使用cover 时，图像将覆盖所有宽度。现在想象我们使高度等于0。在这两种情况下，我们在逻辑上什么都看不到，只是想象背景会如何表现。包含大小将为0，但不包含封面，所有技巧都在这里。

除了上面的观察，你还有后台传播技巧：

对于根元素是 HTML HTML 元素或 XHTML html 元素 [HTML] 的文档：如果根元素上的 background-image 的计算值为 none 并且其 background-color 是透明的，则用户代理必须改为传播从该元素的第一个 HTML BODY 或 XHTML body 子元素计算出的背景属性值。该 BODY 元素的背景属性的使用值是它们的初始值，并且传播的值被视为在根元素上指定了它们。建议 HTML 文档的作者为 BODY 元素而不是 HTML 元素指定画布背景。

所有技巧都在于“被视为在根元素上指定了它们”。换句话说，您的背景应用于html（0 高度和全宽），在这种情况下，背景的大小为 0，因此在传播后我们什么也看不到，但在覆盖的情况下，背景的大小是不同的从 0 开始，我们看到了一些东西。

如果您以 cover 为例，并且将 0 应用于宽度，您将什么也看不到：

body {
  background-image: url(https://media.architecturaldigest.com/photos/5da74823d599ec0008227ea8/16:9/w_2560%2Cc_limit/GettyImages-946087016.jpg);
  background-size: cover;
  margin:0;
}

html {
  width: 0px;
}

稍微增加宽度，背景会开始显示

body {
  background-image: url(https://media.architecturaldigest.com/photos/5da74823d599ec0008227ea8/16:9/w_2560%2Cc_limit/GettyImages-946087016.jpg);
  background-size: cover;
  margin: 0;
}

html {
  width: 5px;
}

宽度等于5px 的小图像的重复模式。如果增加第一个示例的高度，则与包含相同的逻辑

body {
  background-image: url(https://media.architecturaldigest.com/photos/5da74823d599ec0008227ea8/16:9/w_2560%2Cc_limit/GettyImages-946087016.jpg);
  background-size: contain;
  margin: 0;
}

html {
  height: 5px;
}

看到类似行为但有渐变的相关问题：How to remove the stripes that appears when using linear gradient property

您的填充问题现在变得微不足道。添加 padding 会增加 html 元素的高度，并且你的图片大小会不等于 0

【讨论】：

嘿。你介意我在这里问你一个关于边框图像切片的简单问题吗？我知道一旦外部图像的总和变得大于实际图像的大小，边缘区域就会被图像的切片部分填充，但是我使用了 100 x 100 大小的图像，切片为 50%，边缘未填充。在 51% 时，顶部和底部边缘被填充。然后我复制了同一张图像，一次是 100 x 99，一次是 100 x 101 大小，在这两种情况下，在 50% 的切片上，上下边缘都被填充，而左右不填充。我不明白为什么？ 99x 的 50% = 49.5，所以里面更大？
@Ihatecontrolfreaks 你能在这里分享代码吗：jsfiddle.net
这是 100 x 100 jsfiddle.net/36pka7z1 的第一个示例我正在尝试找出如何找到 100x99 和 100x101 的图像。
我做到了。我用 100 x 99 上传了同一图像的计算机图像。在这里。 jsfiddle.net/yha157zk 可以看到同一张图片，高度减少了 1px，切片为 50%，顶部和底部边缘被填充。我不明白为什么？ 99 像素的 50% = 49.5。这不比里面大。
@Ihatecontrolfreaks 在您的第二个示例中没有为您填充顶部和底部

【解决方案2】：

我能给你的最简单的答案就是这个。

background-size : contain; 以适合父容器的方式缩放图像。

html 和body 标签的高度为0px，因此图片无法放入。

您需要创建一个具有宽度和高度属性的div，这样background-size : contain; 将起作用。 :)

另一方面，background-size : cover; 没有这个问题，它总是会覆盖整个父元素（甚至是 body/html 标签）。

希望这会有所帮助。

【讨论】：