如何使父 div 自动高度相对于浏览器宽度？答案

【问题标题】：How to make parent div auto height relatively browser width?如何使父 div 自动高度相对于浏览器宽度？
【发布时间】：2015-12-28 20:59:13
【问题描述】：

我想让一个 div 的高度相对于浏览器宽度变化，就像我们创建一个 div width:100%; 并在里面放 img width:100%; height:auto;，所以在这种情况下，div 的高度相对于 img 的高度是可变的，即重新调整大小从窗口宽度。

但在我的情况下，我不想将 img 放在父 div 中，（里面也是 div 宽度文本块）我想做出父 div 的行为，就像里面是 img。

如何获得？有可能吗？

.hero-section-inner {
  width: 100%;
}
.hero-section-inner img,
.hero-section-inner-half img {
  width: 100%!important;
  height: auto!important;
}
.hero-section-inner-half {
  width: 50%;
  margin-top: 50px;
}

<div class="hero-section-inner">
  <img class="alignnone size-full wp-image-4769" src="http://www.ev-interiordesign.ru/wp-content/uploads/2015/10/about-header.jpg">
</div>
<div class="hero-section-inner-half">
  <img class="alignnone size-full wp-image-4769" src="http://www.ev-interiordesign.ru/wp-content/uploads/2015/10/about-header.jpg">
</div>

所以这是 img 的例子。

【问题讨论】：

与我们分享您的代码。
你想要它作为背景图片吗？还是只作为一个小图片

标签： html css

【解决方案1】：

填充（和边距）百分比总是相对于宽度

.container {
  width: 100%;
  padding-bottom: 54%; // relative to width
  background: red;
  height:0;
}

jsfiddle

您可能有兴趣查看 vh 和 vw css 单位

【讨论】：

【解决方案2】：

如果您在 div 中使用float:left;，它将自动获取图像和高度。此外，float:left; 对于响应式页面也很重要。

那么，

.hero-section-inner {
    float: left;
    width: 100%;
}

【讨论】：

【解决方案3】：

当然，你可以做到这一点。只需将 div 设置为 display:block，您可以访问http://www.28uv.com/extreme-income-ninja/2-building-simple-funnel/ 了解更多详细信息和示例。

【讨论】：