【PR】を含みます。

フロントエンド

【CSS】object-fitで画像サイズを自動調整する方法

CSS object-fitで画像サイズを自動調整する方法

Webサイトで画像を表示する際、サイズがバラバラの画像を統一されたサイズで表示したいことがあります。

CSSのobject-fitプロパティを使えば、画像のアスペクト比を保持しながら、指定したサイズに自動調整できます。

この記事では、object-fit: containとobject-fit: coverの2つの方法を使って、画像サイズを自動調整する方法を紹介します。

サムネイル画像やギャラリー画像の表示でよく使われる手法なので、ぜひ参考にしてください。

object-fit: contain（画像全体を表示）とは

object-fit: containは、画像全体が指定した枠内に収まるように調整する方法です。

画像のアスペクト比を保持しながら、枠内に収まるようにリサイズされます。

画像の一部が切れることはありませんが、枠内に余白ができる場合があります。

以下の画像のように、画像全体が.photo-boxの枠内に収まるように調整されます。

object-fit: containの説明画像

object-fit: cover（画像をトリミング）とは

object-fit: coverは、指定した枠を埋めるように画像をリサイズし、はみ出した部分を切り取る方法です。

画像のアスペクト比を保持しながら、枠を完全に埋めます。

画像の一部が切れる可能性がありますが、枠内に余白はできません。

以下の画像のように、長辺が.photo-boxの枠に収まるように調整され、.photo-boxの枠からはみ出した部分は切り取られます。

object-fit: coverの説明画像

【サンプル】横長画像のobject-fit: containとobject-fit: cover

以下の横長画像を正方形の枠でobject-fit: containとobject-fit: coverで表示してみます。

横長サンプル画像

object-fit: contain

横長サンプル画像

object-fit: cover

横長サンプル画像

【サンプル】縦長画像のobject-fit: containとobject-fit: cover

以下の縦長画像を正方形の枠でobject-fit: containとobject-fit: coverで表示してみます。

縦長サンプル画像

object-fit: contain

縦長サンプル画像

object-fit: cover

縦長サンプル画像

【実装コード】object-fit: contain で画像全体を表示

Copyをクリックするとコピーできます。

HTML
Copy
<div class="photo-box -inscribed">
  <img src="image URL" alt="サンプル">
</div>
CSS
Copy
.photo-box {
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 300px;
  height: 300px;
  border: solid 2px #ccc;
}
.photo-box img {
  vertical-align: top;
}
.photo-box.-inscribed img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

【実装コード】object-fit: cover で画像をトリミング

Copyをクリックするとコピーできます。

HTML
Copy
<div class="photo-box -circumscribed">
  <img src="image URL" alt="サンプル">
</div>
CSS
Copy
.photo-box {
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 300px;
  height: 300px;
  border: solid 2px #ccc;
}
.photo-box img {
  vertical-align: top;
}
.photo-box.-circumscribed img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

まとめ

CSSのobject-fitプロパティを使うことで、画像のアスペクト比を保持しながら指定したサイズに自動調整できます。

object-fit: contain と object-fit: cover の使い分け

プロパティ特徴適した使用場面
object-fit: contain
  • 画像全体が枠内に収まる
  • 画像の一部が切れない
  • 枠内に余白ができる場合がある
  • 商品画像のサムネイル表示
  • ロゴやアイコンの表示
  • 画像の全体を確認したい場合
object-fit: cover
  • 枠を完全に埋める
  • 画像の一部が切れる可能性がある
  • 枠内に余白はできない
  • ヘッダー画像などの背景画像
  • カード型レイアウトの画像
  • 統一されたデザインを重視する場合

実装時の注意点

  • object-fitは画像要素（<img>）に適用するプロパティです
  • 親要素にwidthとheightを指定する必要があります
  • レスポンシブ対応する場合は、親要素のサイズを相対値（%やvwなど）で指定することをお勧めします

これらの方法を使い分けることで、様々なサイズの画像を統一されたデザインで表示できるようになります。

用途に応じて適切な方法を選択してください。

-フロントエンド
-