高度为 100% 时如何保持纵横比？答案

【问题标题】：How do I maintain aspect ratio when height is 100%?高度为 100% 时如何保持纵横比？
【发布时间】：2020-08-11 20:24:49
【问题描述】：

我有一个包含在父 div 中的 iframe，我知道父 div 和 iframe 将是其父（或页面）的 100% 高度。像这样：

<div class="parent"> // will be 100% high
  <iframe></iframe> // will be 100% high & wide, pos absolute
</div>

如何使parent 的宽度始终保持纵横比？就像在父 div 中使用 padding-top: 56.25%; 容纳 iframe 视频以保持 4:3 的纵横比一样，我如何使用宽度来做到这一点？

【问题讨论】：

如果您使用的 100% 是指视口高度，那么您可以使用vh 单位轻松控制纵横比。对于 4:3 的纵横比（横向），然后将 100vh 设置为高度，然后将 133vh 设置为宽度。
嗨特里，这正是我最终做的，我不知道为什么我花了这么长时间。无论如何，谢谢，我会投票:)

标签： html css aspect-ratio

【解决方案1】：

进一步详细说明我的评论：如果您所指的 100% 高度是视口高度，那么您可以轻松地使用 vh 单位来固定相对于视口高度的纵横比。

对于 4:3 横向比例，高度为 100vh，宽度为 calc(100vh / 3 * 4)。您也可以手动计算为133vh（技术上是 133.3333...）。

html, body {
  margin: 0;
  padding: 0;
}

.parent {
  background-color: steelblue;
  height: 100vh;
  width: calc(100vh / 3 * 4);
  
  /* Presentation only */
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Arial, sans-serif;
}

&lt;div class="parent"&gt;4:3 ratio&lt;/div&gt;

【讨论】：