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?

Answer 2

您可以在应用CSS后处理它

 #DivName{
  background-size: auto auto;
     }

这里第一个是自动宽度，第二个是高度

Answer 3

尝试在CSS中使用medie查询以获得不同的屏幕尺寸，以处理不同的固定高度。例如：

@media (min-width: 1200px) { 
    div { height: 3em; } 
}
@media (min-width: 768px) and (max-width: 979px) { 
    div { height: 2em; } 
}
@media (max-width: 767px) { 
    div {  height: 1.2em; } 
}
@media (max-width: 480px) { 
    div {  height: 1em; } 
    }

等。你需要定制什么。您可以将div宽度保持为100％以适合所有屏幕和背景尺寸：封面。您还可以为每种屏幕尺寸制作不同尺寸的背景（差异文件），以减少移动或平板电脑设备的网站尺寸。

Answer 4

由于这是一般用于创建流体高度div的顶级google结果（不仅仅是像问题所指定的那样空的），我想留下一个CSS Calc解决方案，让你将内容放入div（填充技巧力量）它是空的）：

.my-div {
     background: #ccc url(https://link-to-image/img.jpg) no-repeat 50% 0;
     background-size: 100% auto;
     width: calc(100vw - 350px);
     height: calc((100vw - 350px) * 0.468795); /* replace the decimal with your height / width aspect ratio */
}

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

4 个答案: