Question

我想让div的高度可以相对浏览器宽度变化，就像我们创建div width:100%;而内部放置img width:100%; height:auto;一样，所以在这种情况下div的高度可以相对改变img的高度，从窗口宽度重新调整大小。

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

如何获得它？有可能吗？

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

这就是img。

的例子

Answer 1

填充（和边距）百分比始终相对于宽度

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

jsfiddle

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

Answer 2

如果您对div使用float:left;，它会自动获取图像和高度。此外，float:left;对于响应式网页非常重要。

<强>因此，

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

Answer 3

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

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

3 个答案: