無限分身の
忍術使い
Aspect-Ratio同じ比率の分身を
自在に操り、
実体化させる
現代の忍者

これまで、WEBデザインでは、「上から下へ流れる」という性質上、幅（横）が決まってから高さ（縦）が決まるという一方通行な関係だった。
PCだけであったなら、これでも問題は少なかった。
しかし、スマホの登場により、レスポンシブなレイアウトが必須となった。

それまでCSSでは、初期状態での高さというものがまったくの未定義状態のため、箱になる要素が空っぽの状態では高さはゼロ。高さがゼロでは何も表示されない。
例えば背景画像を設定したとして、中身が空の状態では画像が表示されない。
つまり背景画像を表示させるには高さを指定する必要がある。

しかし、レスポンシブな（幅が伸び縮みする）要素に対して高さを指定、つまり固定すると、アスペクト比が崩れてしまい、レスポンシブに対応することが難しかった。背景画像も縦横比が変わってしまい、object-fit: coverやcontainといった方法で対応させる必要があった。
また、高さをパーセントで指定すれば何とかなりそうだが、そのためには、親要素を100％などにする必要があり、親要素をheight: 100%にすると弊害も多く、使える状況も限られていた。

そういったジレンマが何十年も続く中、とある解決策としてハックが登場した。
高さをレスポンシブに変化させるために、padding-topを使う変則的な封印呪文だ。
しかし、これはとてもスマートな方法とはいえなかった。というのもpaddingで高さを設定するためには箱の高さを0にする必要があり、箱の中に何もいれられなかった。
いかにも箱に入っているように見えるように、position: absoluteでフロートさせ見た目だけを合わせるという、非常に危ういとても不自然な実装であった。

そこに登場したのがaspect-ratio！
CSS史上初めてレイアウト支援として、高さと横の比率の概念を実装したプロパティだ。

aspect-ratio は、この「幅と高さの計算式」をブラウザのレンダリングエンジンに直接組み込んだものだ。
aspect−ratio= width/height

これによって、以下のことが初めて可能になった。

・双方向の決定: 幅が決まれば高さが決まり、逆に高さが決まれば幅も自動で計算される。
・直感的な記述: aspect-ratio: 1 / 1; と書くだけで、複雑なハックが不要。
・レイアウト・シフト（CLS）の防止: 画像が読み込まれる前から「ここにこの比率のスペースが空く」とブラウザが確定できるため、ページ読み込み時のガタつきが抑えられる。

つまり、想定する実体の縦横比率を宣言するだけで、要素を無限のサイズ変化に対応させ、要素の中身は空っぽでも実体があっても関係ない。
カレンダーなんかは簡単にできる。

/* .boxが親、.cardがカレンダーの玉にあたる
 * 基本、aspect-ratio: 1/1;の一行を追加するだけ
 * 親はgridでもflexでもどちらでも可。
 */

.box{
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 8px;
	width: 100%;

	.card{
		width: 100%;
		aspect-ratio: 1/1;
		background: rgb(203, 221, 255);
	}
}

さらに箱に背景画像を設定しても、空っぽのままでも簡単に分身の術が可能になる。

上のデモに背景画像を設定したデモ

/* 背景画像を子要素（.card）へ設定 */
	
.box{
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	gap: 8px;
	width: calc(79px*8 + 8*8px);
	width: 100%;

  .card{
		width: 100%;
		min-height: 0;
		aspect-ratio: 79/320;
		background: url(../../images/aspect_ratio.webp) no-repeat center/contain;
	}
}

かつてCSS術師の間では、レスポンシブ時のアスペクト比を保つために「Padding-Topの呪印」という、非常にまどろっこしい古来の呪詛を使い高さの呪いを封印してきた。しかし、現代のCSS術者は、たった一行の呪文でその高さの呪いを解呪してしまった。

aspect-ratioの呪文が解ける時の条件。
実体（中身のテキストや画像）が、指定した比率の器（分身）から溢れ出した場合、ブラウザは「実体」を優先して比率を崩すことになる。

1. width と height を両方指定している
完全に無効化される。

2. min / max による“圧し潰し”
min-height, max-heightなどでもaspect-ratioを解呪される。
たとえば、min-heightの場合
width: 200px;
aspect-ratio: 1 / 1;
の時、あとからmax-height: 150px;などが入ると
高さが200px必要なところ、150pxまでの制限が強制されるのでアスペクト比が崩れてしまう。
max-heightはこの逆。

3. 親のレイアウト制約が強すぎる
display: flexのalign-items: stretchなどでも解呪される。
display: gridも同じで、grid-template-rows: 200px;などで固定値が指定してある場合。

4. 中身（実体）が」強い
テキストの量が多い、URLなど改行されない、など実体のアスペクト比がaspect-ratioと食い違う場合は実体が優先される。

5. 置き換え要素のアスペクト比変更
これも実体が優先される。

6. ブロック要素でない
ブロック要素でないと要素自体に高さの概念がない。

7. サイズが未定義
比率なので縦横どちらかが定義されている必要がある。

8. absolute配置で両端指定
.box {
position: absolute;
top: 0;
bottom: 0;
aspect-ratio: 1 / 1;
}
高さが強制される

9. height: auto の誤解（特にimg）
元画像の比率が優先されたり思った通りに上書きされないことがある

簡単にまとめると、実体と分身のアスペクト比が同じであれば何も問題は発生しない。

デフォルトでは中身が優先されるが、`over-flow: hidden`や`min-height: 0` などを併用することで、より厳格に比率を維持する「禁術」も存在する。

親をaspect-ratio: 16/9;で設定したので子要素はすべて16：9の横長になる。
ここで子要素へアスペクト比1：1の画像を配置する。
すると、画像のアスペクト比が優先され、子要素の高さは画像と同じになり、横幅は変更されないので、
結果として初期設定のアスペクト比16：9が崩れる。

overflow: hiddenで画像のアスペクト比を封印してaspect-ratioの設定を優先させる。
他にmin-height: 0を設定したり、img要素へheight: 100%、object-fit: coverを設定したりしても同じ効果が可能になる。
これはこれまでの用法であった「比率を守る」とは違って逆に「比率で支配する」って使用法になる。
アスペクト比がバラバラの画像ギャラリーなんかにぴったりの手法だと思う。

/* overflow: hidden;, min-height: 0;, などを箱に設定するか、
 * img要素へwidthかheight: 100%;もう片方はauto, object-fit: cover;を設定することで
 * 中身の画像のアスペクト比にかかわらず、aspect-ratioの比率を強制することができる。
 */

.card{
	width: 100%;
	min-height: 0;/* これとか */
	aspect-ratio: 16/9;
	background: rgb(203, 221, 255);
	overflow: hidden;/* これとか */
}

img{
	width: 100%;
	height: auto;/* これは併用 */
	baseline-shift: center;
	object-fit: cover;/* これは併用 */
}

親要素の幅が変われば、分身（子要素や自身の高さ）も瞬時にその比率を保って姿を変え、
同じ比率の分身を自在に操り実体化させるCSSプロパティ、aspect-ratioはまさに分身の術を極めた現代の忍者といえる。

これまで、解説してきた、where()、is()などと同じくデザインの初期設定で有効に活用することで有機的で洗練された、知性あるCSS設計が可能になる。

本来は今回、レスポンシブの予定ではあったが、先にaspect-ratioを解説するのが理解が速いかな？というわけで先にaspect-ratioを解説。
次回は予告通り『今、レスポンシブは線から面へ』の解説を予定。

理解しやすさのため、『1. width と height を両方指定しているとaspect-ratioは完全に無効化される。』
と記載したが、正確にはwidthとheightの両方が確定している場合、aspect-ratioが計算に関与する余地がなくなるということが正しい。

aspect-ratioが登場したのは2021年頃、なのでちょっと解説としては遅いかな。もう枯れた技術といってもいいかもしれないね。(笑)
まあ、それでも今後、解説予定のレスポンシブ支援との関連もあるので改めて取り上げてみた。
それに大事なのは、登場したころはそれほど重視されなかた機能が、新たに追加された他のプロパティや疑似クラスと連携することによって新たな次元の働きをし注目されるのはよくあること。
aspect-ratioの場合はブラウザの大幅な高品質化が影響していると思う。
ただの便利なプロパティから設計支援の重要な歯車になったね。

これは他のプロパティと同様にinline要素には高さの概念がないので、アスペクト比の効果がない。

この解説では、箱（画像のいれもの）と画像をセットで解説した。これは箱とテキストのセットとは微妙に違ってくる。
画像は固有のアスペクト比があるが、テキスト（文字列）にはない。
箱のアスペクト比にテキストは柔軟に対応できるが、画像は固有のアスペクト比があるため箱のアスペクト比と対立する。
そのため、箱と画像をベースとしたレイアウトを基本に解説し、画像ではなく箱の方のアスペクト比を優先する方法を解説した。
人によっては、画像の比率も変更できると考えている人がいるかもしれない。しかし、それは正しくない。
もちろん、縦横両方を100％にすれば、比率を変更できる。ただし、画像が歪むけどね。なので画像には必ず、縦横のどちらかに100％を指定しもう片方にautoを指定する。そうしておいて、object-fitをcoverかcontainに設定する。これで箱のアスペクト比を活かした画像ベースのレイアウトができる。
また画像ではなくて箱の方を、overflow: hidden や、mini-height: 0に指定することでも箱のアスペクト比を活かしたレイアウトが可能だ。
これは上で解説した通り。多分、方法は他にもあると思う。
全てをデモにしようと考えたが数が多すぎるので断念。