最近便利なCSSおれおれAdvent Calendar 2023 – 23 日目 ほとんどの場面では width と height を指定すれば良いんですが、それが面倒な場合や難しい場面もあります。aspect-ratio で縦横の比率を指定できるので便利です。 例 デモ:https://codepen.io/ginpei/pen/JjzjBmK 縦横の片方だけ指定するともう片方は自動で決まります。 取る値 <width> / <height> のような組か、0.5 のような数値 1 つです。 スラッシュは区切りであって割り算の意味ではないんだけど、1 / 2 と 0.5 は結果的に同じです。 大きさに幅がある場合 サイズが max-width 等で指定されていると、それに収まる範囲で縦横比が算出されます。 こんな風にすると必ず画面内に収まる大きさで、かつ縦横比が黄金比になります。
![aspect-ratioで矩形サイズの記述が便利(最近便利なCSSおれおれAdvent Calendar 2023 – 23日目) | Ginpen.com](https://cdn-ak-scissors.b.st-hatena.com/image/square/de4af7f62b39439905833504e59ba1e153be6d8b/height=288;version=1;width=512/https%3A%2F%2Fginpen.com%2Fwp-content%2Fthemes%2Fginpen-theme%2Fimg%2Ficon-512.png)