アスペクト比計算の基本｜16:9や4:3の解像度一覧
デザイン 画像 動画 基礎知識
結論
アスペクト比は**「横：縦」の比率**。YouTubeやテレビは16:9、写真は4:3や3:2が一般的。CSSでは aspect-ratio プロパティを使うのが現代の正解。
主要なアスペクト比一覧
| 比率 | 主な用途・解像度 |
|---|---|
| 16:9 (ワイド) | YouTube, テレビ, モニタ (1920x1080など) |
| 4:3 (スタンダード) | 昔のテレビ, iPad, 写真 (1024x768など) |
| 1:1 (正方形) | Instagram, プロフィール画像 |
| 21:9 (シネマスコープ) | 映画, ウルトラワイドモニタ |
アスペクト比の計算式
横の長さを $W$、縦の長さを $H$、比率を $x:y$ とすると： $$ W = H \times (x / y) $$ $$ H = W \times (y / x) $$
例えば、16:9で横が1280pxなら、縦は $1280 \times (9 / 16) = 720px$ になります。
📐 この場でアスペクト比を計算する
CSSでの指定方法
かつては padding-top を使ったハックが必要でしたが、現在は aspect-ratio プロパティ一括で指定できます。
.video-container {
aspect-ratio: 16 / 9;
width: 100%;
}これにより、レスポンシブ環境でも常に比率を保ったまま要素を伸縮させることが可能です。