为什么 background-size: contain 在这种情况下不起作用？

Question

我不明白为什么在这种特定情况下，属性 background-size: contain 不起作用。在这种情况下 changing background-size: contain 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;

}

Answer 1

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

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

为了说明我的解释，我在您提供的 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"属性调整。但是当没有高度和宽度时，Contain属性没有任何作用。

Answer 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;
    }

<body></body>

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

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;
}

<body></body>

为什么 background-size: contain 在这种情况下不起作用？

Why doesnt background-size: contain work in this case?

css

contains

background-size