widthとheighを同じにする
widthとheightを揃えたい要素にpadding-topでwidthと同じ%を指定する
HTML
<div class="parent">
</div>
CSS
parent {
width: 40%;
padding-top: 40%";
}
文字を入れる場合
<div class="parent">
<p class="child">
テキストテキスト
</p>
</div>
.parent {
background-color: #000;
width: 30%;
display: flex;
justify-content: center;
align-items: center;
}
.parent::before {
display: block;
content: '';
padding-top: 100%;
}
.child {
color: #fff;
}