具有动态高度的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> 

Answer 1

将background-size设置为cover并指定min-height 。

查看小提琴

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: 100% 100%;

您可以在这里尝试一下http://jsfiddle.net/1f36wedc/

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%;  
}

希望有帮助