Html 需要带有背景图像的空 Div 来强制高度并且必须是响应式的
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16563730/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Need Empty Div With Background Image To Force Height and Must Be Responsive
提问by user1447958
I need the following:
我需要以下内容：
- emtpy div with no content
- background image set to the div the
- background image to be fluid/responsive on re-size I cannot set fixed
- dimensions on the div
- 没有内容的空 div
- 背景图像设置为 div
- 背景图像在重新调整大小时变得流畅/响应我无法设置为固定
- div 上的尺寸
Everything I try fails to force the div open to support the size of the background image. Any help is greatly appreciated...
我尝试的一切都无法强制打开 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; }
回答by Warren Whipple
The way to lock a height's aspect ratio to it's fluid width is to use padding-topor padding-bottompercentage. This is because all padding percentages are of the the element container's width. Your background image is 960 x 520, so the height is 54.166666666667%.
将高度的纵横比锁定到其流体宽度的方法是使用padding-top或padding-bottom百分比。这是因为所有填充百分比都是元素容器的宽度。您的背景图片为 960 x 520，因此高度为 54.166666666667%。
html
html
<div class="top_banner"></div>
css
css
.top_banner {
background-image: url('images/bg_front.jpg');
background-size: 100%;
width: 100%;
padding-top: 54.166666666667%;
height: 0;
}
Example: http://jsfiddle.net/SsTZe/156/
示例：http: //jsfiddle.net/SsTZe/156/
Essentially the same question: CSS fluid image replacement?
基本上相同的问题：CSS 流体图像替换？
回答by Sandeep Kumar
You can handle it after applying CSS
应用CSS后就可以处理了
#DivName{
background-size: auto auto;
}
here first auto is for width and second is for height
这里第一个 auto 是宽度，第二个是高度
回答by danielnagy
Try to use medie queries in your CSS for different screen sizes to handle different fixed heights. For example:
尝试在您的 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; }
}
etc. what you need to customize. You can leave the div width 100% to fit for all screen and the background-size:cover. You can also make different size backgrounds (diff. files) for each screen sizes to give less size to your website for mobile or tablet devices.
等等，你需要定制什么。您可以将 div 宽度保留为 100% 以适合所有屏幕和背景尺寸：封面。您还可以为每个屏幕尺寸制作不同尺寸的背景（差异文件），以减少移动或平板设备网站的尺寸。
回答by David Bodow
Since this is a top google result for creating fluid-height divs in general (not just empty ones like the question specifies), I wanted to leave a CSS Calc solution that lets you put content into the div (the padding trick forces it to be empty):
由于这是创建流体高度 div 的顶级谷歌结果（不仅仅是问题指定的空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 */
}
