为什么背景大小：在这种情况下不包含工作？答案

【问题标题】：Why doesnt background-size: contain work in this case?为什么背景大小：在这种情况下不包含工作？
【发布时间】：2020-09-07 03:08:10
【问题描述】：

我不明白为什么在这种特定情况下，属性 background-size: contains 不起作用。在这种情况下，改变 background-size: contains for background-size: cover 确实有效！为什么？

这是我的代码笔： https://codepen.io/JMainol/pen/eYpbQyg

html

<body>

</body>

css

body{
margin: 0;
padding: 0;
background:   url(https://lh3.googleusercontent.com/proxy/-6w3o1Xo04RZwWw86XzQ7TakArUKvRGUF0l-2o25my6y8W47rSTqjOyfVYEg8qZPgkzbQAEoBZQfyiQ-0Hpm72MIRTeCjeUhxtBKt1fenboarbMxo3TrU5cBdbRfvav1377ZearzLWB2ds6_uT_KJs2lKPYo3GxSkYj84XqG5c6JK_2-6MDiSOC8i6KecAopJQ);
background-repeat: no-repeat;
background-size: contain;

}

【问题讨论】：

设置身体高度
@vals 是对的。如果您检查代码，您可以看到 body 高度为 0。您可以将其设置为 height:100vh 或将 body 和 html 标签的高度设置为 100%。

标签： css contains background-size

【解决方案1】：

非常好的问题。包含属性仅在存在与图像具有相对定义的比例的区域时使用。包含属性在不裁剪或拉伸的情况下尽可能大地缩放图像。

虽然在图像可以拉伸到任意比例时使用cover 属性，因此html body 标签具有无限比例（高度和宽度），它确实可以变化很大。如果图像的比例与元素的比例不同，则将其垂直或水平切割，以便没有空白。

为了说明我的解释，我在您提供的 css 中添加了 2 行。

body{
  width: 1920px;
  height: 1080px;
    background: url('https://lh3.googleusercontent.com/proxy/-6w3o1Xo04RZwWw86XzQ7TakArUKvRGUF0l-2o25my6y8W47rSTqjOyfVYEg8qZPgkzbQAEoBZQfyiQ-0Hpm72MIRTeCjeUhxtBKt1fenboarbMxo3TrU5cBdbRfvav1377ZearzLWB2ds6_uT_KJs2lKPYo3GxSkYj84XqG5c6JK_2-6MDiSOC8i6KecAopJQ') no-repeat center;
    background-size: contain;
}

当添加高宽比例时，图像大小根据“包含”属性进行调整。但是当没有高度和宽度时，Contain 属性没有任何作用。

【讨论】：

【解决方案2】：

你的body没有内容，所以你的body高度为0，所以不会应用背景图片：

body{
        margin: 0;
        padding: 0;
        min-height: 100vh;
        background:   url(https://lh3.googleusercontent.com/proxy/-6w3o1Xo04RZwWw86XzQ7TakArUKvRGUF0l-2o25my6y8W47rSTqjOyfVYEg8qZPgkzbQAEoBZQfyiQ-0Hpm72MIRTeCjeUhxtBKt1fenboarbMxo3TrU5cBdbRfvav1377ZearzLWB2ds6_uT_KJs2lKPYo3GxSkYj84XqG5c6JK_2-6MDiSOC8i6KecAopJQ);
        background-repeat: no-repeat;
        background-size: contain;
    }

&lt;body&gt;&lt;/body&gt;

或者您甚至可以只调整填充：

body{
    margin: 0;
    padding: 1rem;
    background:   url(https://lh3.googleusercontent.com/proxy/-6w3o1Xo04RZwWw86XzQ7TakArUKvRGUF0l-2o25my6y8W47rSTqjOyfVYEg8qZPgkzbQAEoBZQfyiQ-0Hpm72MIRTeCjeUhxtBKt1fenboarbMxo3TrU5cBdbRfvav1377ZearzLWB2ds6_uT_KJs2lKPYo3GxSkYj84XqG5c6JK_2-6MDiSOC8i6KecAopJQ);
    background-repeat: no-repeat;
    background-size: contain;
}

&lt;body&gt;&lt;/body&gt;

【讨论】：