如何缩放div尽可能大，保持纵横比而不超过父级？

Question

如果包装器变大，我有一个具有固定宽高比的div可以扩展得更大。

HTML：

<div class="wrapper">
    <div class = "aspect_ratio_3-2">
    </div>
</div>

CSS：

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

您可以在此fiddle

中看到它

如果包装的宽高比大于div的宽高比，则div超过包装（太高）。

我正在寻找一种仅限CSS的方法来尽可能扩大div，而不会超过包装器。包装的宽度和高度是未知的！

是否有与

相似的内容

background-size: contain

只为divs？使用javascript解决这个问题非常简单，但我只想用css来做。