2020年12月21日(月)

CSSでアスペクト比を管理する

• 0
• 0
• 10
• 16

Result

See the Pen oNzebOr by kachibito
(@kachibito) on CodePen.

CSSでアスペクト比を管理しよう、みたいなネタです。

上サンプルはサイズがバラバラな画像を一定の比率のサイズで統一したものです。歪みが出るので画像そのものには使えませんが分かりやすいサンプルとして。

css

:root { --w: 300px; --h: calc(var(--w) / (1.618 / 1)); } img { width: var(--w); height: var(--h); }

こちらは黄金比で固定したものになります。横幅を決めて変数に代入するとcalc()関数で比率に沿った高さに計算されます。後は幅と高さの変数を比率を保ちたい要素に適応すれば任意のアスペクト比を保つ事が出来ます。

例えば横幅400pxで4:3比率固定にしたいなら

:root { --w: 400px; --h: calc(var(--w) / (4 / 3)); }

とすればいい。

CSS変数はcalc()関数と併用出来るので応用すれば捗りますね。