css - 将背景图像高度设置为 100%

Question

我一直在尝试将背景图像的高度设置为 100% 或自动，但是当我这样做时，任何浏览器都无法显示该图像。想不出这是什么原因。它使我无法制作像样的负责任的图像。

代码如下:

<div class="responsive_image" />

CSS 如下:

.responsive_image {
background-image ("testing_image.jpg");
background-size: 100%;
}

同样，(令人沮丧的)结果是图像永远不会显示。但是，当我将 background-size 高度设置为 100px 或 200px 时，图像可以完美显示。无法弄清楚为什么会这样。

Answer 1

当您设置 background-size: 100% 时，计算出来的是:background-size: 100% auto , 其中100%指的是宽度，auto指的是高度(尺寸本身保持纵横比)。

问题是:宽度是 what 的 100%？这有点棘手，因为它是根据 <div class="responsive-image"> 计算的NOT ，但是 <div>的 parent 。您可能没有在父级中定义宽度，因此无法计算背景的宽度，因此不会显示背景。这就是它发生的原因。

有很多方法可以“使背景图像出现”:使用 contain , cover , px对于 background-size ;或者，如果根据父级调整大小是您真正想要的，请给父级一个宽度。