【CSS】画像を思い通りに表示させたい…ですよね？object-fitについて

はじめに

こんにちは、エンジニア2年目の嶋田です。
まずは、この記事を開いていただきありがとうございます！

1年目の頃、初めてCSSに触れた時、widthやheightを指定したりしますが、うまくアスペクト比(画像比率)を保持できない、画像を思う形に切り取れないことがあったのでまとめようと思いました。

概要

CSSのプロパティobject-fitについて簡単に解説します。

object-fitって何？

'object-fit'は、画像や置換要素をコンテナにどのように合わせるかを指定するCSSプロパティです。
画像のサイズやアスペクト比を制御し、トリミングや配置をカスタマイズできます。

値

値	説明
contain	コンテンツはアスペクト比が固定されたまま、要素のサイズに収まるように表示されます。要素とコンテンツのアスペクト比が合わない場合、要素の一部分がレターボックス表示になります。※ 要は何も表示されません。
cover	コンテンツはアスペクト比が固定されたまま、要素のサイズに収まるように表示されます。要素とコンテンツのアスペクト比が合わない場合、コンテンツが合わせるようにトリミングされます。
fill	コンテンツが要素を満たして表示されます。要素とコンテンツのアスペクト比が合わない場合、要素の大きさに合わせてコンテンツが引き延ばされます。
none	コンテンツは拡大も縮小もされず、そのまま表示されます。
scale-down	コンテンツは「none」または「contain」どちらかを指定した状態で、コンテンツが要素よりも小さい場合は「none」として表示されます。

基本的な使用法

1. 画像のアスペクト比を維持する

• 画像をコンテナ内に収めつつアスペクト比を維持したい場合、object-fit: contain;を使用することができます。このプロパティは、画像や置換要素をコンテナ内に収めつつ、アスペクト比を維持して表示します。

例えば、次のようにCSSを適用することで、画像をコンテナ内に収めることができます。

img {
  width: 100%; /* コンテナの幅に合わせる */
  height: 100%; /* コンテナの高さに合わせる */
  object-fit: contain; /* 画像をコンテナ内に収め、アスペクト比を維持する */
}

このように設定することで、画像はコンテナ内に収まりつつ、元の縦横比を保持します。アスペクト比が維持されるため、画像が歪むことなく表示されます。画像がコンテナよりも小さい場合は、余白ができることに注意してください。

2. 画像をトリミングする

画像をコンテナ内に埋め込みつつ、アスペクト比が合わない場合にトリミングしたい場合、object-fit: cover;を使用することができます。このプロパティは、画像をコンテナ内に埋め込み、コンテナのサイズに合わせてアスペクト比を維持します。ただし、アスペクト比が合わない場合、画像の一部がトリミングされます。

以下は、object-fit: cover;を使用して画像をトリミングする方法です。

img {
  width: 100%; /* コンテナの幅に合わせる */
  height: 100%; /* コンテナの高さに合わせる */
  object-fit: cover; /* 画像をコンテナ内に埋め込み、アスペクト比を維持しトリミングする */
}

この設定により、画像はコンテナ内に埋め込まれ、コンテナのサイズに合わせてアスペクト比が維持されます。ただし、アスペクト比が合わない場合、画像はトリミングされ、コンテナに合わせた表示となります。画像を中央からトリミングします。
この方法を使用することで、コンテナに画像をフィットさせつつ、必要に応じてトリミングできます。

高度な使用法

1. トリミング位置を調整する

object-fitプロパティを使用して画像をコンテナ内に収めることはできますが、時には画像のトリミング位置を調整したい場合があります。この場合、object-positionプロパティを組み合わせて使用することができます。object-positionは、画像の表示位置を指定し、トリミングされる部分を調整します。

以下は、object-fitとobject-positionを組み合わせて画像のトリミング位置を調整する方法です。

img {
  width: 100%; /* コンテナの幅に合わせる */
  height: 100%; /* コンテナの高さに合わせる */
  object-fit: cover; /* 画像をコンテナ内に埋め込み、アスペクト比を維持しトリミングする */
  object-position: right top; /* 画像を右上に配置（トリミング位置の調整） */
}

この設定により、object-fitによって画像がコンテナ内に埋め込まれ、アスペクト比が維持されます。また、object-positionによって画像の表示位置が右上に調整され、トリミングされる部分が変更されます。

object-positionの値は、水平方向（left、center、right）と垂直方向（top、center、bottom）を指定することができます。これにより、トリミング位置を自由に調整できます。

この方法を使用することで、画像のトリミング位置をコントロールし、デザインに合わせた表示を実現できます。

2. レスポンシブデザインへの応用

object-fitは、レスポンシブデザインにおいて画像のトリミングとサイズ調整を行うための強力なツールです。レスポンシブデザインでは、さまざまなデバイスや画面サイズに対応する必要があり、画像の表示を調整することが一般的です。以下では、object-fitを使ったレスポンシブデザインへの応用方法を説明します。

画像のトリミングとサイズ調整

object-fitは、画像をトリミングしてコンテナに収める際に、アスペクト比を保持したままサイズ調整するのに役立ちます。これは、異なる画面サイズやレイアウトに合わせて画像を適切に表示するための重要な要素です。

以下は、object-fitを使って画像のトリミングとサイズ調整を行う一般的な例です。

img {
  width: 100%; /* コンテナの幅に合わせる */
  height: 100%; /* コンテナの高さに合わせる */
  object-fit: cover; /* 画像をコンテナ内に埋め込み、アスペクト比を維持しトリミングする */
}

この設定により、画像はコンテナに合わせて拡大縮小され、トリミングされることでレスポンシブデザインに適した表示が実現されます。

画像の置換要素としての活用

object-fitは、置換要素（例：<img>や<video>）にも適用できます。これにより、動画や置換画像のサイズと配置を調整し、コンテンツの一貫性を維持できます。

video {
  width: 100%; /* コンテナの幅に合わせる */
  height: 100%; /* コンテナの高さに合わせる */
  object-fit: contain; /* アスペクト比を維持しつつコンテナに収める */
}

このように、object-fitを置換要素に適用することで、動画や画像がレスポンシブデザインに適した方法で表示されます。

メディアクエリとの組み合わせ

さらに、object-fitをメディアクエリと組み合わせることで、特定の画面幅やデバイスに合わせて異なるobject-fitの設定を適用することができます。これにより、異なるデバイスに適した画像表示を実現できます。

@media (max-width: 768px) {
  img {
    object-fit: contain; /* スマートフォン向けにアスペクト比を維持しトリミングせずに表示 */
  }
}

@media (min-width: 769px) {
  img {
    object-fit: cover; /* デスクトップ向けにトリミングして表示 */
  }
}

このように、メディアクエリを使用してobject-fitの設定を切り替えることで、異なるデバイスで最適な表示を提供できます。

object-fitは、レスポンシブデザインの一環として、画像のトリミングとサイズ調整を行うために非常に便利なプロパティです。異なるデバイスや画面サイズに適した表示を実現するために、積極的に活用しましょう。

3. 画像を円形にトリミングする

object-fitとは異なり、border-radiusプロパティを使って画像を円形にトリミングする方法もあります。このアプローチを使えば、画像を円形に切り抜いてデザインにアクセントを加えることができます。

border-radiusプロパティを使用

まず、画像を円形にトリミングするには、border-radiusプロパティを使用します。このプロパティは、要素の角に丸みを持たせるのに使用されます。

.img-circle {
  width: 200px; /* 画像の幅を設定 */
  height: 200px; /* 画像の高さを設定 */
  border-radius: 50%; /* 角を丸くすることで円形にトリミング */
}

上記のCSSコードでは、.img-circleクラスに対してborder-radiusプロパティを50%に設定しています。この設定により、画像が円形にトリミングされます。

画像を表示

次に、HTMLで画像を表示します。

<img class="img-circle" src="circle-image.jpg" alt="円形にトリミングされた画像">

ここで、.img-circleクラスが適用された<img>要素によって画像が表示されます。

別のトリミング方法としての活用

border-radiusプロパティを使って画像を円形にトリミングすることは、デザインに新しい要素を追加する方法として非常に効果的です。円形のプロフィール写真やアイコンなどに活用できます。

この方法を使って、ウェブサイトやアプリケーションのデザインに独自の魅力を加えましょう。

border-radiusプロパティを使用して画像を円形にトリミングすることで、デザインに新しい要素を追加し、視覚的な興味を引くことができます。

まとめ

最後までお付き合いいただき、ありがとうございます！
私自身もまだまだ勉強中なので、何か間違えている情報がありましたらコメントでご指摘よろしくお願いします🙇‍♂️