具有背景大小的 DIV答案

【问题标题】：DIVs with background-size具有背景大小的 DIV
【发布时间】：2015-06-06 02:38:08
【问题描述】：

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

所以我想制作几个堆叠的 div，每个都有一个可以通过 background-size 调整大小的背景。但是，我注意到除非我还手动设置 div 的高度，否则我无法获得 100% 或包含作为属性值。我可以使用设置的 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.

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

感谢您的帮助！

【问题讨论】：

标签： html css responsive-design background-image background-size

【解决方案1】：

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

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

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

【讨论】：

好的，很好。我认为这是我需要做的（我对是否应该使用封面或包含感到困惑）。我会想出一个合理的高度。而且在 1080p 显示器上设置固定高度不会很奇怪，对吧？
我不这么认为。但是你也可以随时使用媒体查询:)
其实不需要设置固定高度。您可以使用任何具有宽度和高度的定位层（即也使用百分比），并且由于您想要一个流畅的布局，您还可以使用旧的“padding-bottom”技巧为您的层提供一定的比例（比如说 2： 1）而不是固定高度。无论如何，background-size: cover 确实似乎最适合这里。

【解决方案2】：

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

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

【讨论】：