css - 如何以纯 CSS 方式使 100% 宽度的 div 始终具有与其宽度的 50% 相对高度？

Question

这个问题在这里已经有了答案:





Maintain the aspect ratio of a div with CSS

(36 个回答)


1年前关闭。




我有一个 div 并将其宽度设置为 100%
因此 div 可以随着其父元素或窗口的大小调整而调整大小。

但是，我希望 div 有 50% 的高度，我应该写什么 CSS？ (或任何其他百分比，而不仅仅是 50%)

看来50%绝对是走错路了。

我可以使用 JavaScript 来做到这一点，但有没有纯 CSS 的方式？

#out {
  border:1px solid #f00;
  position:relative;
  width:100%;
  height:50%;
}

<div id="out">
stuff<br>
stuff<br>
</div>

Answer 1

因为分配给边距和填充的任何百分比都是基于 width 计算的，您可以使用它来保持纵横比:

#out {
  border: 1px solid #f00;
  padding: 25% 0;
  position: relative;
  width: 100%;
}

<div id="out">
  stuff<br> stuff
  <br>
</div>

但是，问题在于您的内容进一步增加了高度。为了解决这个问题，将内容包装在另一个容器中，您提供 position: absolute :

#out {
  border: 1px solid #f00;
  padding: 25% 0;
  position: relative;
  width: 100%;
}

.inner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

<div id="out">
  <div class="inner">
    stuff<br> stuff
    <br>
  </div>
</div>