Html 需要带背景图像的空Div强制高度，并且必须响应

我需要以下资料：

• 没有内容的emtpy div
• 背景图像设置为div
• 背景图像在重新调整尺寸时流动/响应，我无法设置固定
• div上的尺寸

我尝试的所有操作都无法强制div打开以支持背景图像的大小。非常感谢您的帮助

.front#header.top_banner{background:url（'images/bg#u front.jpg'）不重复；背景大小：cover；}

您可以在应用CSS后处理它

 #DivName{
  background-size: auto auto;
     }

---

这里第一个auto表示宽度，第二个表示高度

尝试在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; } 
    }

---

等等。你需要定制什么。您可以保留100%的div宽度以适合所有屏幕和背景大小：cover。您还可以为每个屏幕大小制作不同大小的背景（不同的文件），以减少移动或平板电脑设备网站的大小。

锁定高度纵横比与流体宽度的方法是使用

填充顶部

或

填充底部

百分比。这是因为所有填充百分比都是元素容器的宽度。您的背景图像为960 x 520，因此高度为54.166667%

html

例如：

---

本质上是同一个问题：

由于这是谷歌在创建流体高度div（而不仅仅是问题指定的空div）方面的最佳结果，我想留下一个CSS Calc解决方案，让您将内容放入div（填充技巧强制它为空）：

---

我愿意看到你的努力。请发布一个你工作的JSFIDLE链接和你想要的输出截图。上面添加了站点链接和代码片段。背景将根据你的Div大小。因此，如果没有设置Div的大小，那么背景图像将根据Div的大小显示。我无法设置Div的大小，因为我需要它能够响应…任何建议？您可以从中看到答案。在这种情况下，您需要检查加载图像的高度和宽度，并需要设置div大小。auto不起作用…没有高度div的空div仍然会折叠。这是浏览器渲染的一部分。你能在你的div上加一个空格“”吗？我想它会有用的。如果你成功了，请告诉我。你从哪里得到54.166667%的顶部填充率？这是一个很好的技术，它绕过了必须明确说明高度的问题。除了说声谢谢之外，我还想引起其他人对这个答案的注意。这应该是公认的答案。感谢Warrent Whippledoes calc现在在所有浏览器上的工作，因为我一直避免使用它，因为缺乏支持？最近calc的报道相当不错，除了opera mini：

@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 class="top_banner"></div>

.top_banner {
    background-image: url('images/bg_front.jpg');
    background-size: 100%;
    width: 100%;
    padding-top: 54.166666666667%;
    height: 0;
}

.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 */
}