html - 需要带有背景图像的空 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 fluid image replacement?