我需要以下内容:
>没有内容的emtpy div
>背景图像设置为div
>背景图像流畅/响应重新大小我无法设置固定
> div上的尺寸
我尝试的所有内容都无法强制div打开以支持背景图像的大小.任何帮助是极大的赞赏…
<header id="header"> <div class="wrapper"> <div class="inner"> <div class="top_banner"></div> </div> <div class="clear"></div> </div> </header> .front #header .top_banner { background: url('images/bg_front.jpg') no-repeat; background-size: cover; }
解决方法
将高度的纵横比锁定到其流体宽度的方法是使用填充顶部或填充底部百分比.这是因为所有填充百分比都是元素容器的宽度.你的背景图片是960 x 520,所以高度是54.166666666667%.
HTML
<div class="top_banner"></div>
CSS
.top_banner { background-image: url('images/bg_front.jpg'); background-size: 100%; width: 100%; padding-top: 54.166666666667%; height: 0; }
示例:http://jsfiddle.net/SsTZe/156/
基本上是同一个问题:CSS fluid image replacement?