需要空Div与背景图像强制高度,必须响应

Question

我需要以下内容:

• 没有内容的emtpy div
• 背景图像设置为div
• 背景图像是流动/响应重新大小我不能设置固定
• div上的尺寸

我尝试的所有内容都无法强制div打开以支持背景图像的大小.任何帮助是极大的赞赏...

http://www.everymountain.us/

<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; }

Answer 1

将高度的纵横比锁定到其流体宽度的方法是使用padding-top或padding-bottom百分比.这是因为所有填充百分比都是元素容器的宽度.你的背景图片是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流体图像替换？

Answer 2

应用CSS后即可处理

 #DivName{
  background-size: auto auto;
     }

这里第一个 auto 用于宽度，第二个用于高度