CSSのobject-fitで画像や動画の表示方法を調整する方法をわかりやすく解説

2024.09.14
スポンサーリンク

object-fitプロパティは、要素のコンテナ内に画像や動画などのメディアをどのようにフィットさせるかを指定します。このプロパティは、特にimgタグやvideoタグなどで使われ、コンテナのサイズに対してコンテンツを適切に調整するのに役立ちます。

スポンサーリンク

object-fitプロパティの値とその効果の一覧

  • contain – コンテンツ全体を表示するためにコンテナ内に収まるように縮小します。
  • cover – コンテナ全体をカバーするためにコンテンツがトリミングされることがあります。
  • fill – コンテンツをコンテナに完全にフィットさせ、アスペクト比は維持されません。
  • none – 画像は縮小も拡大もされず、オリジナルサイズがそのまま表示されます。
  • scale-down – コンテンツのサイズがコンテナに収まらない場合、縮小されますが、コンテナよりも小さい場合は縮小されません。

注意点や関連情報

object-fitプロパティを使用する際は、画像や動画のアスペクト比が重要です。coverやcontainを使用すると、アスペクト比を保ちながら表示されますが、fillを使用すると歪んでしまう可能性があります。また、ブラウザ互換性を確認し、古いブラウザでサポートされていないことがある点に注意が必要です。

object-fitが効かない時の原因と対策

画像や動画に明示的なサイズが指定されていない

object-fitは、要素に対して画像や動画の表示方法を制御するプロパティですが、要素自体に明示的なwidthやheightが設定されていないと、object-fitが期待通りに機能しないことがあります。

対策: 画像や動画の要素に明示的なwidthやheightを設定し、object-fitの効果が反映されるようにします。

object-fitが画像や動画以外の要素に適用されている

object-fitは、主に<img>や<video>、<picture>などのメディア要素に対して使用されるプロパティであり、他の要素には効果がありません。

対策: object-fitを適用したい要素が画像や動画であることを確認し、他の要素には適用しないようにします。

画像や動画がレスポンシブ設定されていない

レスポンシブなレイアウトでは、画像や動画が親要素に応じてサイズを変える必要がある場合、object-fitの効果が適切に反映されないことがあります。

対策: 画像や動画に対して、width: 100%やheight: 100%などのレスポンシブスタイルを適用し、親要素に応じてサイズが変更されるようにします。その上で、object-fitのプロパティを適用します。

object-positionの影響

object-positionが指定されている場合、object-fitと組み合わせて期待通りに機能しないことがあります。特に、要素の位置とフィット方法が競合する場合です。

対策: object-positionの設定を確認し、object-fitと組み合わせた場合に要素が正しく表示されるように調整します。

共通するCSSコード

.css-sample-container {
      width: 100%;
      margin: 20px 0;
      display: flex;
      justify-content: center;
    }

    .css-sample-item {
      width: 300px;
      height: 200px;
      margin: 10px;
      border: 2px solid #000;
    }

    .css-sample-item img {
      width: 100%;
      height: 100%;
      object-fit: inherit; /* デフォルト値 */
    }

object-fit: contain;

コンテナ内に画像全体を収めて表示します。アスペクト比は保たれます。

HTMLコード

<div class="css-sample-container">
      <div class="css-sample-item css-sample-fit-contain">
        <img src="https://programming-cafe.com/wp-content/uploads/colorphoto02.jpg" alt="サンプル画像">
      </div>
    </div>

CSSコード

.css-sample-fit-contain img {
      object-fit: contain;
    }

表示結果

サンプル画像

object-fit: cover;

コンテナ全体をカバーするように画像が表示されますが、アスペクト比は保たれます。

HTMLコード

<div class="css-sample-container">
      <div class="css-sample-item css-sample-fit-cover">
        <img src="https://programming-cafe.com/wp-content/uploads/colorphoto02.jpg" alt="サンプル画像">
      </div>
    </div>

CSSコード

.css-sample-fit-cover img {
      object-fit: cover;
    }

表示結果

サンプル画像

object-fit: fill;

画像はコンテナ全体にフィットしますが、アスペクト比は保たれません。

HTMLコード

<div class="css-sample-container">
      <div class="css-sample-item css-sample-fit-fill">
        <img src="https://programming-cafe.com/wp-content/uploads/colorphoto02.jpg" alt="サンプル画像">
      </div>
    </div>

CSSコード

.css-sample-fit-fill img {
      object-fit: fill;
    }

表示結果

サンプル画像

object-fit: none;

画像はそのままのサイズで表示され、縮小や拡大されません。

HTMLコード

<div class="css-sample-container">
      <div class="css-sample-item css-sample-fit-none">
        <img src="https://programming-cafe.com/wp-content/uploads/colorphoto02.jpg" alt="サンプル画像">
      </div>
    </div>

CSSコード

.css-sample-fit-none img {
      object-fit: none;
    }

表示結果

サンプル画像

object-fit: scale-down;

コンテナに画像が収まらない場合、縮小されて表示されます。

HTMLコード

<div class="css-sample-container">
      <div class="css-sample-item css-sample-fit-scale-down">
        <img src="https://programming-cafe.com/wp-content/uploads/colorphoto02.jpg" alt="サンプル画像">
      </div>
    </div>

CSSコード

.css-sample-fit-scale-down img {
      object-fit: scale-down;
    }

表示結果

サンプル画像

まとめ

  • object-fitプロパティは、画像や動画のコンテナ内でのフィットの仕方を指定します。
  • containやcoverを使ってアスペクト比を維持しながらフィットさせることができます。
  • fillではアスペクト比が崩れますが、コンテナ全体を埋めることが可能です。
スポンサーリンク