我在頭div中有CSS背景圖片。圖像響應能夠正常工作,但我無法得到它的工作,所以當它調整大小時,標題圖像下的內容「跟隨」圖像。響應式CSS背景圖片 - 如何製作內容
問題是,當我給標題圖像div的高度值,然後div高度是固定的。而當我不給身高的形象根本沒有顯示。
參見工作示例JSFIDDLE
任何幫助如何解決?
我在頭div中有CSS背景圖片。圖像響應能夠正常工作,但我無法得到它的工作,所以當它調整大小時,標題圖像下的內容「跟隨」圖像。響應式CSS背景圖片 - 如何製作內容
問題是,當我給標題圖像div的高度值,然後div高度是固定的。而當我不給身高的形象根本沒有顯示。
參見工作示例JSFIDDLE
任何幫助如何解決?
這裏是您的解決方案:
問題: -以百分比表示的高度值不起作用,除非它已用於任何位置圖層。
解決方案: -而不是高度。使用「padding-bottom」或「padding-top」值來使高度響應。百分比值與「填充」效果很好。
計算非常簡單,可以獲得任何背景圖像的相關響應高度值。
例如: -如果背景圖像尺寸是(1200寬度)x(450高度)像素。然後圖像響應 「高度」 值將是: 「37.5%」
公式: - Y(×)100(÷)十,它是(450×100÷1200)= 37.5%
解決方案網址: -http://sandeepparashar.com/stackoverflow/responsive-css-background-image-height.html
代碼: -
.custom-header-option {
padding-bottom:37.5%; /* This will make height responsive */
background-image: url('http://unplugged.ee/wp-content/uploads/2013/03/frank2.jpg');
background-repeat:no-repeat;
background-size:cover;
background-position:center;
}
如果需要更多的幫助,最歡迎:)
我想你想要做的是消除「白色空間」的差距?
試試這個代碼:http://jsfiddle.net/0bjgfo16/4/
HTML
<img src="http://unplugged.ee/wp-content/uploads/2013/03/frank2.jpg" />
<div class="content-wrap">
<p>here is content</p>
</div>
CSS
* { box-sizing: border-box; padding: 0; margin: 0; }
img { max-width: 100%; float: left; }
.content-wrap {
width: 100%;
height: 200px;
background-color: grey;
color: #fff;
float: left;
}
嘗試使用
標頭內部的div div而不是css background-image –
reuelab
2014-09-03 06:30:44
不清楚當圖像大小調整時標題圖像「跟隨」的含義。 – kinakuta 2014-09-03 06:34:31
這意味着標題圖像下的內容應該附加在標題圖像的底部 - 不會在標題圖像和內容之間留下空白。 – ace 2014-09-03 06:37:39