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

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

的代码如下：

<div class="responsive_image" />

而CSS如下：

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

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

来源

2015-06-25 msnetto

如果您使用'background-size：cover;'或'background-size：contains;'，该怎么办？ –

首先，你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 */ 
 
}

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

来源

2015-06-25 02:17:31

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

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

有许多方法来“做背景图像出现”：使用contain，cover，px为background-size;或者如果对父项进行大小调整就是您实际需要的值，请给父项一个宽度。

来源

2015-06-25 02:20:30 light

谢谢大家的下水道。我一直在研究这个问题，它可以是一个小小的窍门，就像光明。实际上，我已经通过放弃背景图像属性并使用100％宽度和高度的img来解决问题。当然，这是一个临时解决方案：我将存储您的答案，以便我可以在不久的将来再次尝试此属性。再次感谢您的回答。 – msnetto

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

回答

相关问题