Html 如何将div扩展到尽可能大的范围，保持纵横比且不超过父级？

我有一个具有固定纵横比的div，如果包装器变得更大，它会更大

HTML:

你可以在这张照片上看到

如果包装器的纵横比大于div的纵横比，则div超出包装器太高

我正在寻找一种只使用CSS的方法来尽可能地扩展div，而不超过包装器。包装的宽度和高度未知

有类似的吗

background-size: contain

---

就为了女主角？用javascript解决这个问题很容易，但我只想用css来解决。

如果不使用javascript，我认为这是不存在的。样式大多是通用的，跨越各种HTML元素。在CSS规范中，我没有看到任何东西可以使background size:contain不适用于div。您是否真的在.aspect\u ratio\u 3-2样式细节中尝试过它？另外，另一件事，纵横比3-2的名称可能并不完全有效；试试纵横比

.aspect_ratio_3-2 {
 width:100%;
 background: rgba(255,0,0,0.8);
}
.aspect_ratio_3-2:after{
    content:'';
    display:block;
    padding-top: 50%;
}
.wrapper{
    width: 20%;
    height: 90%;
    background: black;
}

background-size: contain