Javascript 如何根据父级高度确定纵横比？

我想让纵横比由父高度控制

我在stackoverflow和codepen中搜索的每个示例都是按宽度大小计算纵横比的示例

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

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

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

如何使用css实现这一点

.wrap{显示：网格；网格模板列：1fr；网格模板行：30vh 70vh；} .项{边框：1px实心红色；} .长宽比{背景：蓝色；高度：100%；} 纵横比应为16:9 您可以使用css calc

.wrap{显示：网格；网格模板列：1fr；网格模板行：30vh 70vh；} .项{边框：1px实心红色；} .纵横比{背景：蓝色；高度：100%；宽度：calc30vh*16/9；} 纵横比应为16:9