Question

我在尝试创建流畅的HTML页面时遇到问题。（我想考虑不同大小的分辨率，所以我正在处理宽度为1920px的背景图像）

所以我想制作几个堆叠的div，每个div的背景都可以通过background-size调整大小。但是，我注意到我无法获得100％或包含作为属性值工作，除非我也手动设置div的高度。我可以使用set px或％手动设置它，但我觉得这不是动态设置div高度的最佳方法。

所以我想知道是否有更好的方法来设置div的高度，所以它被设置为与具有background-size属性的图像高度相同的高度，所以我没有得到所有图像后的空白区域，如果div太高。

我在这里有一个实例：ModelBase

#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.

//之前我从未使用过背景大小，所以也许我做错了，但我想尝试制作适合任何分辨率的页面。

感谢您的帮助！

Answer 1

我认为更好的解决方案是将固定height与background-size: cover结合使用。像这样：

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

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

Answer 2

本例中的

解决了这个问题。

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

背景大小的DIV

2 个答案: