💪
HTML と CSS だけで要素のアスペクト比を固定する
まず結果を見たい人向け
ソースコードとサンプル
作りたいもの (要件)
- 要素のアスペクト比を指定したい (具体的な px 値を使わずに).
実装解説
HTML は非常にシンプル. ポイントは, アスペクト比を固定した要素 (この HTML では id が "ratio_16-9" の <div>
要素) に小要素は 1 つのみ入れること.
index.html
<div id="ratio_16-9">
{なにか要素一つ (例: YouTube 動画埋め込み)}
</div>
まず <div id="ratio_16-9">
に position
と overflow
を設定.
この時点では子要素がないため高さが 0
である.
style.css
* {
box-sizing: border-box;
}
#ratio_16-9 {
position: relative; /* relative は通常の位置を基準にする. */
overflow: hidden; /* はみ出した部分を非表示にする. */
}
次に :before
疑似要素を使って 16:9
の空白の要素を挿入する. padding-top
(padding-bottom
でも良い) で比率を指定すると要素の横幅を基準とするため, 56.25%
とすれば 16:9 となる. 75%
とすれば 4:3
もできる.
この :before
疑似要素によって <div id="ratio_16-9">
は, 高さが横幅の 56.25%
である (つまりアスペクト比 16:9 の) 長方形となる.
#ratio_16-9:before {
content: '';
display: block;
width: 100%;
padding-top: 56.25%;
}
最後に, 表示させたい中身のスタイルを設定する. 16:9 になった <div id="ratio_16-9">
の幅・高さ一杯に中身を表示する.
ここで position: absolute; top: 0; left: 0;
とすることで親要素である <div id="ratio_16-9">
の左上を原点として扱える.
style.css
#ratio_16-9 > * {
position: absolute; /* absolute は祖先要素のうち position が static (初期値) 以外に設定されている要素の左上を基準にする. この場合親要素の h1 の左上が基準となる. */
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Discussion