CSS、要素の縦横比を固定、
aspect-ratio。

〽️ heightの相対値問題を解消。〽️ 使用上の注意。〽️ overflowはautoで。

syntax。

.element { aspect-ratio:「「５width」」/「「５height」」; }

width/heightの片方からもう一方を算出。

こんにちは、「ふ」です。
今回はCSSで要素の縦横比を固定する、aspect-ratio属性について紹介します。

.elm { width:200px; background-color:burlywood; }

width/heightのうち、widthだけが指定された<div>要素。ここにaspect-ratio属性を追加します。

.elm { width:200px; background-color:burlywood; 「「１aspect-ratio:2/1」」; }

すると、widthの値を元にheightの大きさを算出し、ブラウザにレイアウトされます。
値は分数形式で記述し、分母がheight、分子がwidthに採用されます。ここではwidth:200pxに対して「2/1」としたため、heightは100pxとして表示されました。

「ふ」もこの便利なaspect-ratio属性の登場を待ち焦がれていました。
どのようなメリットをもたらすのか、次にお話しします。

heightの相対値問題を解消。

aspect-ratioの最大のメリット、それは「heightの相対値問題を解消してくれる」という点にあります。

サイト上に縦横比1:1、つまり正方形の要素を配置します。
この要素を形を崩すことなく、<body>の幅に対して一定の大きさで表示させたい。
どのようにすれば良いでしょうか？

.elm { width:100px; height:100px; }

「px」などの絶対値であれば、たしかに縦横の比率は保たれます。

が、当然ながら絶対指定なので、<body>の幅が変化しても100px*100pxのままです。
<body>幅の変化に比例して大きくなったりはしてくれません。

〜では相対値による指定を試みます。これで画面幅に応じて可変することはするでしょう。

ところがwidthやheightを相対値で使用する場合、「親要素に対する割合」で結果が算出されます。そのため、親要素のwidthやheightが明示的に指定されている必要があります。

上から下へスクロールさせていく、一般的なwebページにおいて。要素を<body>直下に置いた場合。
<body>のwidthについては、先づ指定がされているかと思います。
しかしheightはどうでしょうか。<body>の高さはコンテンツの長さに左右されるので、具体的に指定されていないことが多いかと思います。
算出の基準となる親要素のheightが明示されていないため、要素のheightを相対値で指定したとしても機能してくれません💧

こう言った「heightの相対値問題」をaspect-ratio属性がすんなりと解決してくれます。

.elm { width:25%; aspect-ratio:1/1; }

widthを好きな大きさに決めておき、aspect-ratioを1:1に指定しましょう。
widthに対して指定した比率でheightを算出してくれます。

これにより縦横の比率をくずすことなく、画面幅に比例して要素を拡大/縮小させることができます。

aspect-ratioの性質。

実際に使用するときに困らないよう、aspect-ratio属性の性質について知っておきましょう。

aspect-ratioはwidth/heightのうち「片方の大きさを明示しておいてから指定する」というのが基本的なつかいかたです。

@1@ widthから算出。

.elm { width:50%; aspect-ratio:2/1; }

「height問題」解消のために、「width明示→heghtをaspect-ratioで算出」が一般的でしょう。

@2@ heightから算出。

.elm { height:20em; aspect-ratio:2/3; }

heightを明示してwidthをaspect-ratioで算出することもできます。

@3@ 両方明示しない場合。

.elm { aspect-ratio:2/1; }

width/heightともに明示せずaspect-ratioのみ指定した場合。 widthの初期値である「100%」からheightが算出されます。

@4@ 両方明示した場合。

.elm { width:50%; height:20em; aspect-ratio:1/1; }

さいごはwidth/heightの両方を明示し、aspect-ratioを1/1（正方形）にしてみます。
すると指定した1/1が反映されません。どうやらwidth/heightで明示した値が優先されてしまうみたいですね。

aspect-ratioが思い通りの結果になってくれないときは、この@1@〜@4@の性質について確認してみてください。