CodePen： https://codepen.io/renoinn/pen/abNvJZr
参考記事： https://css-tricks.com/aspect-ratio-boxes/
paddingにパーセント指定する場合、widthを基準にするので、それを利用することでアスペクト比を保ったboxを作る。
<html>
<style>
.aspect-ratio-box {
width: 50%;
height: auto;
padding-top: 50%;
background-color: red;
position: relative;
}
.inner-box {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
<body>
<div class="aspect-ratio-box">
<div class="inner-box">
testtest
</div>
</div>
</body>
</html>