html - 100% bg 容器 img 宽度问题

Question

我不相信我的问题和其他人在这个网站上发布的问题完全一样，所以如果我错过了一个提前向这个优秀社区道歉的问题。

我的问题是:

我在导航容器下面设置了一个英雄容器，以便给它 100%，但是当我减小浏览器的大小时，图像(在英雄容器的背景中)按比例缩小并且不会占用容器的完整尺寸。我不介意图像是否因为它的比例增加和减小而移动，我只是不希望它变得太小以至于前景内容没有背景

这里是一个截屏，可以准确说明正在发生的事情:http://youtu.be/lLT3VzHOlPU

这是一个代码笔:http://codepen.io/MARS/pen/fEuKr

感谢所有花时间提供帮助的人，非常感谢。

Answer 1

该视频很适合描述您的问题。 :) 您可以在 <div> 上使用此 CSS与类 hero-container .背景图像将始终填满整个空间，但永远不会扭曲:

-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

看这里，哪个浏览器支持CSS3 Background-image options

演示

Try before buy