如何使用css制作div相对于其宽度百分比的高度百分比？

我正在尝试做一个布局，我的div的高度取决于它的宽度。这在CSS中是可能的吗？到目前为止，我还没能把它做好。这可能很容易，我不知道；我的强项不是CSS。谢谢你的帮助

以下是我所拥有的：

身体{ 保证金：0； 框大小：边框框； } .主集装箱{ 背景颜色：浅蓝色； 显示器：flex； 柔性包装：包装； } .掩护{ 显示：内联块； 宽度：calc100%/3；/*这将divs宽度设置为屏幕的三分之一*/ /*高度：？？？？； 使用以下纵横比技术：

---

如果我正确理解问题，如果您不介意再添加一个DIV，我的建议如下：

身体{ 保证金：0； 框大小：边框框； } .主集装箱{ 背景颜色：浅蓝色； 显示器：flex； 柔性包装：包装； } .掩护{ 显示：内联块； 宽度：calc100%/3； } .集装箱{ 显示：块； 溢出：隐藏； 宽度：100%； 垫底：130%； } 这里是封面1 这里是2号封面 这里是3号封面 这里是第四章

---

这回答了你的问题吗？你可以使用vw视图宽度单位。高度：calc100vw/3*130；它似乎不起作用。只会使每个div比整个屏幕大小大130%，但我只需要div比其自身宽度大130%：是的，你是对的，我犯了一个错误，我应该将纵横比添加到内部div中，我将更新我的一点解决方案。

:root {
  --unit: calc(100% /3)
}
body{
   margin: 0;
   box-sizing: border-box;
}
.mainContainer{
   background-color: lightblue;
   display: flex;
   flex-wrap: wrap;
}
.cover{
   display: inline-block;
   width: var(--unit);
}
.container {
  height: 0;
   padding-top: 130%;
   width: 130%;
}