9

我需要以下内容：

  • 没有内容的空 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; }
4

4 回答 4

34

将高度的纵横比锁定为其流体宽度的方法是使用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 流体图像替换？

于 2013-05-29T16:46:54.817 回答
1

应用CSS后即可处理 

 #DivName{
  background-size: auto auto;
     }

这里第一个 auto 是宽度，第二个是高度

于 2013-05-15T11:57:34.317 回答
1

由于这是一般创建流体高度 div 的顶级谷歌结果（不仅仅是问题指定的空的），我想留下一个 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 */
}
于 2017-12-14T19:41:34.840 回答
0

尝试在 CSS 中针对不同的屏幕尺寸使用媒体查询来处理不同的固定高度。例如：

@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% 以适应所有屏幕和 background-size:cover。您还可以为每个屏幕尺寸制作不同尺寸的背景（差异文件），以减少移动或平板设备网站的尺寸。

于 2013-05-15T15:55:31.040 回答