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

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

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

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

    
テキスト


#wrapper {
    position: relative;
    width: 100%;
}
#wrapper:before {
    content:"";
    display: block;
    padding-top: 75%; /* 4:3の比率の場合　100% / 4 *3 */
}
#content {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

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