高度为100％时如何保持长宽比？

问题描述

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

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

如何使parent的宽度始终保持长宽比？ 就像将iframe视频以padding-top: 56.25%;的形式放置在父div中以保持4：3的长宽比一样，如何使用宽度？

解决方法

要进一步阐述我的评论：如果您所指的100％高度是视口高度，那么您可以轻松地使用migrate单位来固定相对于视口高度的纵横比。

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

133vh

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