html - 具有背景大小的 DIV

Question

我在尝试制作流畅的 HTML 页面时遇到了问题。 (我想考虑不同尺寸的分辨率，所以我使用宽度为 1920 像素的背景图片)

所以我想制作几个堆叠的 div，每个都有一个可以通过 background-size 调整大小的背景。但是，我注意到我无法获得 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.

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

感谢您的帮助!

Answer 1

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

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

fiddle :https://jsfiddle.net/lmgonzalves/fcb1wcth/2/