画像リサイズでアスペクト比（縦横比）を維持するコツとCSS表示（object-fit）

画像をリサイズする際のアスペクト比（縦横比）崩れを防ぐコツ、最適なリサイズ寸法の決め方、および CSS での表示制御（object-fit / aspect-ratio）です。

1. オンライン アスペクト比維持 画像リサイズツール

アスペクト比のロックを保持したまま、指定した幅または高さに合わせて画像をブラウザ内で高速リサイズします。

---

2. CSS でアスペクト比を崩さない表示制御（object-fit）

固定寸法のカード要素やサムネイル枠（例: 300px × 200px）にアスペクト比の異なる画像を入れる際、そのまま指定すると縦または横に引き伸ばされて画像が歪みます。

/* ❌ 歪みが発生する NG な記述 */
.card-img-bad {
  width: 300px;
  height: 200px; /* 縦横比が無視されて画像が伸びる */
}

/* ✅ アスペクト比を維持して枠に収める OK な記述 */
.card-img-good {
  width: 300px;
  height: 200px;
  object-fit: cover;   /* 枠を全域覆うように中央基準で余剰をトリミング */
  object-position: center;
}

object-fit プロパティ値の使い分け

• cover (標準推奨): 枠一杯に画像をアスペクト比維持で拡大・トリミング。サムネイルやアイキャッチに最適。
• contain: 画像全体が枠内に収まるように縮小配置（余白が発生する）。商品画像・ロゴに最適。

---

3. レスポンシブ画像のための srcset 指定

デバイスの画面幅（ビューポート）に合わせて複数サイズのリサイズ画像をブラウザに選択させます。

<img 
  src="photo-800.jpg" 
  srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w"
  sizes="(max-width: 600px) 100vw, 50vw"
  alt="サンプル画像"
  loading="lazy"
/>