背景大小的DIV

我在嘗試製作流暢的HTML頁面時遇到了問題。（我想考慮不同大小的分辨率，所以我正在處理寬度爲1920px的背景圖像）背景大小的DIV

所以我想製作一對堆疊的div，每個div都有一個通過背景大小調整大小的背景。但是，我注意到我無法獲得100％或包含作爲屬性值，除非我也手動設置div的高度。我可以使用set px或％手動設置它，但我覺得這不是動態設置div高度的最佳方式。

所以我想知道是否有更好的方法來設置div的高度，所以它被設置爲與background-size屬性的圖像高度相同的高度，所以我沒有得到所有圖像後的空白區域，如果div太高。

我有一個活生生的例子在這裏：https://jsfiddle.net/fcb1wcth/

#header { 
background-image: url('http://i.imgur.com/x5wEY56.png'); 
background-repeat: no-repeat; 
background-size: contain; 
height: 710px; 
color: #ffffff; 
} 

For example, this first div above... Since I'm working with a smaller screen, 710px is way too tall! The background-size does its job, I just don't know how to set the height correctly, and using a property value of auto doesn't help it.

//我從來沒有使用的背景大小的過，所以也許我這樣做不對，但我想嘗試和試驗製作一個適用於任何解決方案的頁面。

感謝您的幫助！

來源

2015-06-05 Blockis

我認爲，更好的辦法是結合使用固定height與background-size: cover。就像這樣：

#header { 
    background-size: cover; 
    height: 400px; 
}

FIDDLE：https://jsfiddle.net/lmgonzalves/fcb1wcth/2/

來源

2015-06-05 18:38:08 lmgonzalves

好的，優秀的。我認爲這是我需要做的事情（我很困惑，如果我應該使用封面或包含）。我會爲它提出一個合理的高度。並且在1080p顯示器上設置固定的高度並不奇怪，對吧？ – Blockis

我不這麼認爲。但你總是可以使用媒體查詢:) – lmgonzalves

其實你不需要設置一個固定的高度。你可以使用任何具有寬度和高度的定位圖層（即也使用百分比），並且既然你想要一個流體佈局，你也可以使用舊的「填充底部」技巧來給你的圖層一定的比例（比如說2： 1）而不是固定的高度。無論如何，'背景大小：封面'似乎最適合這裏。 –

在這個例子中解決了這個問題。

http://www.jqueryscript.net/animation/Minimal-Full-Screen-Vertical-Slider-with-jQuery-Scroll-On-Scroll.html

來源

2015-06-05 18:37:58

背景大小的DIV

回答

相關問題