javascript - 如何通过 parent 高度获得纵横比？

Question

我想通过父级高度控制纵横比。

我在 stackoverflow 和 codepen 中搜索的每个示例都是宽高比按宽度大小的示例。

在我的示例中，我有两个 div。高度由 wrap div 控制。所以在第一个 div 中有一个 div 应该以 16:9 的纵横比显示。

这意味着如果高度为 200px，则宽度应为 355px (200*(16/9))。

请记住高度可以改变，因为我使用 vh。

如何使用 css 做到这一点？

Here is my example code in codepen

.wrap { display:grid;grid-template-columns:1fr;grid-template-rows:30vh 70vh; }

.item { border:1px solid red; }

.aspect-ratio { background:blue; height: 100%; }

<div class="wrap">
 <div class="item">
   
   <div class="aspect-ratio">aspect ratio should be 16:9</div>
   
  </div>
 <div class="item"></div>
</div>

Answer 1

你可以使用 css calc();

.wrap { display:grid;grid-template-columns:1fr;grid-template-rows:30vh 70vh; }

.item { border:1px solid red; }

.aspect-ratio { background:blue; height: 100%; width: calc(30vh * 16 / 9); }

<div class="wrap">
 <div class="item">
   
   <div class="aspect-ratio">aspect ratio should be 16:9</div>
   
  </div>
 <div class="item"></div>
</div>