最近便利なCSSおれおれAdvent Calendar 2023 – 23 日目

ほとんどの場面では width と height を指定すれば良いんですが、それが面倒な場合や難しい場面もあります。aspect-ratio で縦横の比率を指定できるので便利です。

例

.Card {
  aspect-ratio: 1.618 / 1;
  height: 100px;
  /* width: 161.8px; */
}

縦横の片方だけ指定するともう片方は自動で決まります。

取る値

<width> / <height> のような組か、0.5 のような数値 1 つです。

スラッシュは区切りであって割り算の意味ではないんだけど、1 / 2 と 0.5 は結果的に同じです。

大きさに幅がある場合

サイズが max-width 等で指定されていると、それに収まる範囲で縦横比が算出されます。

こんな風にすると必ず画面内に収まる大きさで、かつ縦横比が黄金比になります。

.Card {
  aspect-ratio: 1.618 / 1;
  max-height: 100vmin;
  max-width: 100vmin;
}

余白等は別途考慮する必要があります。

（vmin は画面 (view port) の縦横短い方を 100vmin とする単位です。）

縦横が与えられている場合

aspect-ratio が示す値は「好ましいアスペクト比 preferred aspect ratio」です。width と height が与えられた場合はそちらが優先されます。

.Card {
  aspect-ratio: 1.618 / 1; /* 正方形になっちゃう */
  height: 100px;
  width: 100px;
}

おしまい

アイコンなんかも矩形にしろ円形にしろ縦横同じなので縦横書くよりアスペクト比で記述する方が意味が通りやすいかも？

あとよく言う黄金比は 1.618 だそうです。

参考