おぼえがき

アスペクト比は「aspect-ratio」というプロパティで設定

アスペクト比とは縦と横の比率を数字で表したもので、1:1、3:4、16:9などがよく使われています
なかでも黄金比（1:1.618）、白銀比（1:1.414）は有名な比率です

一番便利だと思うのがサムネイル画像。
CMSで画像サイズがバラバラのものを投稿した場合でも、アスペクト比とobjext-fitを使えば同じサイズで表示することが可能

・MDN

代表的なアスペクト比

アスペクト比計算ツール

aspect-rratioの使い方

下のボックスは「aspect-ratio: 16 / 9」を使って作られています。

                  
                    aspect-ratio: 16 / 9;
                  
                

「aspect-rratio」が使える要素

• ブロック要素（divなど）
• 画像（img）
• iframe
• 動画（video）

実際には、幅（width）が決まったときに高さ（height）が自動的に計算される、あるいはその逆の挙動になります。
明示的にwidthとheightの両方が指定されている場合、aspect-ratioは無視されます。

レイアウトシフトとWeb Vitalss

Webページの読み込み中、画像や広告があとから挿入されてテキストが押し下げられるといったことがあります。これは、Cumulative Layout Shift（CLS）と呼ばれる現象で、GoogleのWeb Vitals指標のひとつでもあります。

このような「視覚的な揺らぎ」が発生すると、ユーザーは混乱したり、誤クリックをしたりすることがあります。CLSのスコアが高いページは、検索順位やユーザー体験に悪影響を及ぼすとされており、現代のWeb開発では避けるべき問題です。

ここでaspect-ratioが役立ちます。

画像や動画が読み込まれる前からその表示領域の縦横比をブラウザが確保してくれるため、後からの読み込みでもレイアウトがずれないのです。

たとえば画像に明確な比率が設定されていれば、その領域は固定されたスペースとして扱われるため、他の要素が押し下げられる心配がありません。これにより、CLSスコアの改善が期待できます。

レイアウトシフト対応の古いやり方との比較

「aspect-ratio」が登場する以前は。。

縦横比を維持するためには padding-top や padding-bottom を使ったハックを使っていました

                  
                    .wrapper {
  position: relative;
  padding-top: 56.25%;
  /* 16:9 の比率 = 9 ÷ 16 = 0.5625 → 56.25% */
}

.wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
                  
                

「aspect-ratio」だと。。

aspect-ratioを使えば簡潔に書けます

                  
.wrapper {
  aspect-ratio: 16 / 9;
}

.wrapper iframe {
  width: 100%;
  height: 100%;
}
                  
                

・「aspect-ratio」のブラウザ対応状況

例：YouTube動画の埋め込み

YouTubeなどの外部動画をiframeで埋め込む場合、読み込みが遅れると動画領域の高さが一瞬ゼロになり、レイアウトが不安定になることがあります。これもaspect-ratioを使えば、読み込み前から縦横比に基づいたスペースを確保することができます。

たとえば、YouTubeの動画は通常「16:9」の比率で表示されるため、以下のように指定します。

                  
.video-wrapper {
  aspect-ratio: 16 / 9;
}

.video-wrapper iframe {
  width: 100%;
  height: 100%;
}
                  
                

表示結果

※ 画面の横幅を変えてみてください。比率が保たれているのがわかります

例：Googleマップの埋め込み

Googleマップをiframeで埋め込む場合も、YouTube動画と同様に、読み込みが遅れるとマップ領域が一瞬ゼロの高さになり、ページ全体のレイアウトに影響を与えることがあります。

このようなケースでは、aspect-ratioを使うことで、読み込み前からマップの縦横比を確保することができ、レイアウトの安定性が向上します。

以下の例では、4:3の比率でGoogleマップを埋め込んでいます。

                  
.map-wrapper {
  aspect-ratio: 4 / 3;
}

.map-wrapper iframe {
  width: 100%;
  height: 100%;
}
                  
                

表示結果

「max-idth:600px; / aspect-ratio: 4 / 3;」で表示

この方法なら、Googleマップが読み込まれていない段階でも、4:3のスペースが先に確保されるため、レイアウトがずれることなく表示できます。

「width:100%: / aspect-ratio: 4 / 1.5;」で表示

バラバラの画像を同じサイズに揃える

カード型の画像サイズを揃える

CMSで画像サイズがバラバラのものを投稿した場合でも、アスペクト比とobjext-fitを使えば同じサイズで表示することが可能

デモ