css - 如何在不同的断点处填充上面的折叠

Question

所以我最近发现了一些网站，其中折叠上方的背景总是完美地裁剪到视口(viewport)。例如 - 如果您查看 http://startbootstrap.com/templates/grayscale/或 http://simplesimple.co/currency/在移动设备、平板电脑或桌面设备上，即使在不同的方向上，背景图像也始终会填满视口(viewport)。

这并不像向图像添加 max-width: 100% 那样简单，因为这只会水平填充。我的第一个想法是它是艺术指导用例，其中断点针对图像的不同裁剪。虽然要实现这种效果似乎需要做很多工作，所以我想知道我是否遗漏了什么。

Answer 1

引用http://startbootstrap.com/templates/grayscale/ ，主横幅图像已添加为背景图像，其 background-size 属性的值为 cover，它将拉伸(stretch)图像以适应任何尺寸的屏幕。

然后有一些技巧，比如将主要部分标签设置为 display 属性设置为 table，这允许其子 div(包含标题和子标题)垂直居中显示:table-cell 和 vertical-align:middle

它建立在 twitter bootstraps 框架之上，该框架具有内置的网格和媒体查询，允许通过 background-image 属性为每个屏幕尺寸添加不同的图像