具有动态高度的CSS div，可响应背景图像

Question

I trying to create a class with a dynamic image background on bootstrap3 without success. Instead use height equal to 180px i trying to use 100% to make it responsive. Whats wrong?

 .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

set your background-size to cover and specify a min-height .

check out the fiddle

Answer 2

there are a few ways to make an image responsive, but there are questions, do you want to keep the aspect ratio?

if you want to keep your approach of using a div and assigning background properties you can use the following 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%;
}

this will make the div 100% height and width of the parent, but the image background-size is 100% width with auto height. This means, the height will keep its aspect ratio of the original image.

if you want the image to take the full height-width of the parent and not maintain its aspect ratio you can change background-size to:

background-size: 100% 100%;

you can play around with it here http://jsfiddle.net/1f36wedc/

Answer 3

The responsive idea for images is like this:

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

Hope this help