CSSでボックスのアスペクト比を固定する（レスポンシブ対応）
基本的なコード
疑似要素（::before）を使用したケース
HTML
<div class="box">
<div class="content">hogehoge fugafuga</div>
</div>CSS
.box{
position: relative;
width: 100%;
}
.box:before{
content:"";
display: block;
padding-top: 75%; /*アスペクト比によって変更*/
}
.content{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}※アスペクト比によってpadding-topを変更する
4：3・・・・padding-top: 75%;
16：9・・・・padding-top: 56.25%
3：2・・・・padding-top: 66.6%;
黄金比・・・padding-top: 62%;
aspect-ratioを使用するケース
HTML
<div class="box">
<figure><img src="画像パス" alt=""></figure>
</div>CSS
.box figure{
position: relative;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
aspect-ratio: 3/2;
overflow: hidden;
}
.box figure img{
width: 100%;
height: 100%;
object-fit: cover;
}7行目、aspect-ratioでアスペクト比を指定する。