2

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

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

所以我想知道是否有更好的方法来设置div的高度，所以它设置为与具有背景大小属性的图像高度相同的高度，所以我没有得到所有的空白空间图像，如果 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.

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

谢谢你的帮助！

4

2 回答 2

1

我认为更好的解决方案是使用 fixedheight与background-size: cover. 像这样：

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

小提琴：https ://jsfiddle.net/lmgonzalves/fcb1wcth/2/

于 2015-06-05T18:38:08.527 回答
0

在这个例子中解决了这个问题。

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

于 2015-06-05T18:37:58.733 回答