CSSで高さを可変にして縦横比(アスペクト比)を維持する方法です。 縦横比(アスペクト比)1:1のサイズで幅に合わせて高さを可変にしたい時などに使えます。 paddingの特性を使って実現しています。さっそく使い方から。 CSSで高さを可変にして縦横比(アスペクト比)を維持する方法 まずはhtmlから <div class="box"> <div class="box__content"> text text </div> </div> cssはこう .box { height: auto; position: relative; width: 100%; } .box::before { content: ''; display: block; padding-top: 100%; } .box__content { bottom: 0; left: 0; position: absol