Aspect Ratio 計算｜16:9 / 4:3 解像度一覧と CSS aspect-ratio の指定方法

1. オンライン Aspect Ratio (アスペクト比) 計算ツール

幅・高さ・比率数値を相互入力して、比率を維持したピクセル数を即座に算出します。

---

2. 定番アスペクト比と標準ピクセル解像度一覧

比率	主なユースケース	ピクセル解像度例 (幅 × 高さ)
16 : 9	YouTube, テレビ, PCモニター, 横動画	1920 × 1080, 1280 × 720, 3840 × 2160
9 : 16	TikTok, Shorts, リール (縦型動画)	1080 × 1920, 720 × 1280
4 : 3	昔のTV, iPad画面, デジカメ写真	1024 × 768, 1600 × 1200, 640 × 480
1 : 1	Instagram 投稿, 正方形アイコン	1080 × 1080, 512 × 512
2.39 : 1	シネマスコープ (映画)	3840 × 1608, 1920 × 803

---

3. CSS でのアスペクト比維持コード

/* iframe や img の高さを 16:9 に自動維持 */
.video-container {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover; /* 画像が歪むのを防ぐ */
}

---

4. 注意点（ハマりどころ）

1. object-fit: cover の併用忘れによる画像の歪み
   • CSS で aspect-ratio を固定しても、元画像の比率と異なる場合に object-fit: cover;（トリミング保持）または object-fit: contain;（全表示）を指定しないと画像が縦横に伸び潰れて表示されます。
2. height の明示的指定とのバッティング
   • height: 400px; のように絶対高さを同時に指定すると aspect-ratio が無効化される場合があります。height: auto; に指定してください。