帶動態高度的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來響應背景圖片

回答

相關問題