CSS动态高度的div与响应式背景图像

Question

我试图在Bootstrap3中创建一个带有动态图像背景的类，但没有成功。 我尝试使用高度等于180px代替，使用100％来使其响应。出了什么问题吗？

.audio-cover {
 background: url("http://media.merchantcircle.com/22662073/180px-Smiley_svg_full.png");
 background-size: contain;
 background-repeat: no-repeat;
 height: 100%; //instead use 180px
}

<div class="col-xs-4 col-sm-4 col-md-4 audio-cover"></div>

- 8lou

---

在响应式网页设计中，您需要将图像的width或max-width设置为100％，并允许其高度增加。如果您需要控制高度，则需要使用一些“wrapper”并为其设置高度，并使用overflow:hidden。 - Mehdi Dehghani

为什么你不在div里使用img？ - Pavel Gatnar

为了让 height:100% 生效，audio-cover 的父级需要在 CSS 中指定一个有效的高度，否则它将是 null 的 100%。 - G-Cyrillus

@MehdiDehghani 我有一个高度为176像素的溢出隐藏warp div，但仍然不起作用。还有一个宽度为100％的音频封面。 - 8lou

Warp是解决方案，但我想创建一个具有动态高度的div。因此，我不想在我的Warp上使用180px。我该怎么做？ - 8lou

@8lou，请问您能否勾选答案旁边的勾来标记我的回答为已接受吗？谢谢。 - Rachel Gallen

Answer 1

将您的background-size设置为cover并指定一个min-height。

查看fiddle

- Rachel Gallen

Answer 2

有几种方法可以使图片具有响应性，但问题是，你想保留宽高比吗？

如果您希望继续使用 div 并分配背景属性的方法，则可以使用以下 CSS：

#image {
    background-image: url(http://www.ucl.ac.uk/news/news-articles/1213/muscle-fibres-heart.jpg);
    background-size: 100% auto;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
}

这将使div的高度和宽度都是父元素的100％，但图像背景大小为宽度100％，自动调整高度。这意味着高度将保持原始图像的纵横比。

如果您想让图像占据父元素的完整高度和宽度，并且不保持其纵横比，您可以将background-size更改为：

background-size: 100% 100%;

你可以在这里玩弄它 http://jsfiddle.net/1f36wedc/

- Abdul Ahmad

Answer 3

关于图片的响应式设计思路如下：

<div>
    <img src="SOME_WHERE" />
</div>

div{
    width: X; // depended on your logic
    height: 170px;
    overflow: hidden; // by this one, maybe you lost some part of image, but is okay
}
div > img{
    max-width: 100%;  
}

希望这可以帮到你

- Mehdi Dehghani