CSSだけでアスペクト比を固定

画像とテキストボックスを縦と横の比率をそろえたまま縮小したいなんて場面があります。

特に、画像と一緒に並べたテキストボックスと画像の縦幅が合わず、レイアウトが崩れたりなんかが、例として挙げられます。

ですが、画像と同じように、テキストボックスをCSSだけでアスペクト比を固定したまま縮小する方法があります。

ポイントは「wrapper:before」の padding-topの%は画像の比率4:3の場合、
100% / 4 *3 = 75なので、padding-topの値は75%となっています。

この記事を見た人は次の記事も見ています。