背景大小的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

回答

相关问题