100%bg容器img宽度问题

时间:2013-09-08 18:03:05

标签: html css

我不相信我的问题与本网站上发布的其他问题完全一致,所以如果我错过了一个对这个优秀社区的道歉。

我的问题是:

我在导航容器下方设置了一个英雄容器,以便给它100%但是当我减小浏览器的大小时,图像(在英雄容器的背景中)缩小并且不占用容器的全尺寸。我不介意图像是否因为它的尺寸增大和减小而变化我只是不希望它变得如此之小以至于前景内容没有背景而留下

这是一个屏幕演示,用于说明正在发生的事情:http://youtu.be/lLT3VzHOlPU

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

感谢任何花时间提供帮助的人,非常感谢。

1 个答案:

答案 0 :(得分:1)

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

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

请参阅此处,哪个浏览器支持CSS3 Background-image options

<强>演示

Try before buy