• Home
  • Web制作
  • 【CSS】画像のレイアウト調整の強い味方！object-fitを使いこなそう！

【CSS】画像のレイアウト調整の強い味方！object-fitを使いこなそう！

schedule
Tags: CSS

はじめに

Webサイト制作において、画像のレイアウトは重要な要素の一つです。

画像を思い通りの大きさに表示させるために、これまでは以下のような方法が用いられてきました。

  • widthプロパティとheightプロパティで直接大きさを指定する。
  • max-widthプロパティとmax-heightプロパティで最大サイズを指定する。

しかし、これらの方法では、画像のアスペクト比が崩れてしまうことがあります。

そこで便利なのが、 object-fit プロパティです。

object-fitプロパティを使えば、画像のアスペクト比を維持したまま、思い通りの大きさに調整することができます。

object-fitの使い方

object-fitプロパティは、置換要素に対して適用することができます。

置換要素とは、内容やサイズが外部から決定される要素のことで、具体的にはimg要素やvideo要素などが該当します。

object-fitプロパティの基本的な構文は以下の通りです。

img {
  object-fit: 値;
}

object-fitプロパティには、以下の様な値を設定することができます。

  • fill (初期値): 画像をコンテナに合わせて拡大縮小します。アスペクト比は維持されません。
  • contain: 画像のアスペクト比を維持したまま、コンテナ内に収まるように縮小します。
  • cover: 画像のアスペクト比を維持したまま、コンテナ全体を覆うように拡大縮小します。
  • none: 画像の元のサイズを維持し、拡大縮小しません。
  • scale-down: noneとcontainのうち、小さい方と同じ表示になります。

object-fitの使用例

アスペクト比を維持したまま、画像をレスポンシブ対応させる

object-fitプロパティを使うと、画像のアスペクト比を維持したまま、レスポンシブ対応させることができます。

例えば、以下のように記述します。

img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

このように記述することで、画像の幅を常に親要素の100%に合わせ、高さはアスペクト比を維持したまま自動調整されます。

これにより、ブラウザの幅が変わったとしても、画像のアスペクト比が崩れることなく表示することができます。

まとめ

今回は、CSSのobject-fitプロパティについて解説しました。

object-fitプロパティを使うことで、画像のアスペクト比を維持したまま、思い通りの大きさに調整することができるため、Webサイト制作において非常に便利なプロパティです。

ぜひ、object-fitプロパティを使いこなし、より魅力的なWebサイトを作成してください。

関連記事