带动态高度的CSS div来响应背景图片

我试图在bootstrap3上创建一个动态图像背景的类，但没有成功。而是使用等于180px的高度，我试图使用100％来使其响应。怎么了？带动态高度的CSS div来响应背景图片

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

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

来源

2015-07-21 8lou

在响应式网页设计中，如果您需要控制高度，您需要使图像的'width'或'max-width'成为'100％'并允许高度增长，您需要使用一些'wrapper'并设置为此的高度，并使用'溢出：隐藏' –

为什么你不''在div'内使用'img'？ –

为了看高度：100％;工作，音频封面的父母需要在CSS中指定和有效的高度，否则它是100％的空 –

设置你的background-size到cover并指定min-height。

退房的fiddle

来源

2015-07-21 21:05:51

对图像的响应的想法是这样的：

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

希望这有助于

来源

2015-07-21 22:04:38

有几种方法可以使图像响应，但也有问题，你想保持宽高比吗？如果你想保持你的使用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%; 
}

这将使母公司的股利100％的高度和宽度，但图像背景大小与自动高度是100％宽度。这意味着，高度将保持其原始图像的纵横比。

，如果你想要的形象取父的全高度，宽度，不能维持其长宽比你可以改变背景大小：

background-size: 100% 100%;

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

来源

2015-07-21 22:15:18

带动态高度的CSS div来响应背景图片

回答

相关问题