具有背景大小的 DIV

Question

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

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

高度的最佳方式

所以我想知道是否有更好的方法来设置 div 的高度，所以它设置为与背景尺寸 [=30= 的图像高度相同的高度]，所以如果 div 太高，我不会在图像后得到所有的白色 space。

我这里有一个活生生的例子：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

在此示例中解决此问题。

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

Answer 2

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

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

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

具有背景大小的 DIV

DIVs with background-size

html

css

responsive-design

background-image

background-size