Question

我一直试图将背景图像的高度设置为100％或自动，但是当我这样做时，任何浏览器都不会显示图像。无法找出原因。它使我无法制作出体面的负责任的形象。

代码如下：

<div class="parent">
    <div class="child">
        100% height
        (parent is 200px)
    </div>
</div>

<div class="viewport-height">
    100vh height
</div>

CSS如下：

<div class="responsive_image" />

同样，（令人沮丧的）结果是图像永远不会显示。但是，当我将背景大小高度设置为100px或200px时，图像会完美显示。无法弄清楚它为什么会发生。

Answer 1

首先，您的background-image遗漏了: url之后（如下所示：background-image: url('testing_image');）

示例：

＆＃13;

.responsive_image {
  height: 100px;
  width: 100px;
  background-image: url('http://placehold.it/50x50');
  background-repeat: no-repeat;
  background-size: 100%; /* or better, use cover (or contain) if you don't want to stretch images */
}

＆＃13;

<div class="responsive_image"></div>

＆＃13;

Answer 2

当您设置background-size: 100%时，其计算的内容为：background-size: 100% auto，其中100%表示宽度，auto表示高度（尺寸本身保持纵横比）

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

“制作背景图片”的方法有很多种：contain使用cover，px，background-size;或者，如果调整为父级是你真正想要的，请给父级一个宽度。

将背景图像高度设置为100％

2 个答案: