将背景图像高度设置为 100%答案

【问题标题】：Setting background image height to 100%将背景图像高度设置为 100%
【发布时间】：2015-09-11 10:47:29
【问题描述】：

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

代码如下：

<div class="responsive_image" />

CSS 如下：

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

同样，（令人沮丧的）结果是图像从未显示。但是，当我将背景尺寸高度设置为 100 像素或 200 像素时，图像会完美显示。不知道为什么会这样。

【问题讨论】：

如果您使用background-size: cover; 或background-size: contain; 会怎样？

标签： css image background height

【解决方案1】：

首先，您的background-image 后面缺少: url（例如：background-image: url('testing_image');）

例子：

.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 */
}

&lt;div class="responsive_image"&gt;&lt;/div&gt;

【讨论】：

【解决方案2】：

当您设置background-size: 100% 时，它会计算成：background-size: 100% auto，其中100% 指的是宽度，auto 指的是高度（大小本身保持纵横比）。

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

“使背景图像出现”有很多方法：使用contain、cover、px 为background-size；或者如果你真正想要的是父级的尺寸，给父级一个宽度。

【讨论】：

谢谢大家的回答。我一直在学习这个主题，这真的是一个小把戏，就像光说的那样。实际上，我通过放弃背景图像属性并使用宽度和高度为 100% 的 img 解决了这个问题。当然，这是一个临时解决方案：我将存储您的答案，以便在不久的将来再次尝试此属性。再次感谢您的回答。