響應式CSS背景圖片 - 如何製作內容

我在頭div中有CSS背景圖片。圖像響應能夠正常工作，但我無法得到它的工作，所以當它調整大小時，標題圖像下的內容「跟隨」圖像。響應式CSS背景圖片 - 如何製作內容

問題是，當我給標題圖像div的高度值，然後div高度是固定的。而當我不給身高的形象根本沒有顯示。

參見工作示例JSFIDDLE

任何幫助如何解決？

來源

2014-09-03 ace

嘗試使用標頭內部的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

這裏是您的解決方案：

問題： -以百分比表示的高度值不起作用，除非它已用於任何位置圖層。

解決方案： -而不是高度。使用「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; 
}

如果需要更多的幫助，最歡迎:)

來源

2014-09-03 13:08:40

我想你想要做的是消除「白色空間」的差距？

試試這個代碼：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; 
    }

來源

2014-09-03 06:58:29 Oneezy

響應式CSS背景圖片 - 如何製作內容

回答

相關問題