CSSで画像の表示方法を指定するobject-fitの使い方

生徒

画像サイズをCSSでうまく調整できないです

先生

CSSのobject-fitプロパティの使い方を説明します

 この記事でわかること

• CSSのobject-fitプロパティの種類
• object-fitプロパティでできること

レイアウトに合わせた画像表示をしたい

object-fitプロパティについて

object-fitプロパティの種類

object-fitプロパティには、以下の種類があります。

noneは元の画像をそのまま表示

画像サイズと表示する要素が同じサイズでないと、余白やはみ出しが生じます。

CSSの記述

/* 元の画像サイズのまま表示する */
.none {
  object-fit: none;
}

画像表示の例

画像が表示する要素より小さい場合

画像サイズが表示する要素より小さい場合、元の画像サイズで表示されることで余白ができます。

画像が表示する要素より大きい場合

画像が表示する要素より大きい場合、元の画像サイズで表示されることで、はみ出て表示されない部分ができます。

fillは縦横比を無視して引き伸ばす

画像の内容は全て表示されますが、縦横に歪みが生じるので、無地の画像以外だとかなり違和感が出ます。

CSSの記述

/*　画像を要素いっぱいに拡大または縮小して表示する　*/
.fill {
  object-fit: fill;
}

画像の表示例

画像が表示する要素より小さい場合

画像サイズが表示する要素よりも小さい場合、表示要素の形に合わせて画像が拡大されます。

画像が表示する要素より大きい場合

逆に、元の画像サイズが表示要素よりも大きい場合は、表示要素の形に合わせて画像が縮小されます。

coverは縦横比を維持して全体を覆える大きさにする

画像の縦と横のサイズの片方は表示する要素と同じ、もう片方は表示する要素以上のサイズになります。

CSSの記述

/*　表示する要素をすべて覆えるサイズにする　*/
.cover {
  object-fit: cover;
}

画像の表示例

画像が表示する要素より小さい場合

画像サイズが表示する要素よりも小さい場合は、縦横比を維持したまま表示する要素すべてを覆える最小の大きさまで拡大します。

画像が表示する要素より大きい場合

画像サイズが表示する要素よりも大きい場合、縦横比を維持したまま表示する要素すべてを覆える最大の大きさに縮小します。

containは縦横比を維持してすべてが収まる大きさにする

画像の縦と横の片方は表示する要素と同じサイズ、もう片方は表示する要素以下のサイズになります。

CSSの記述

/* 表示要素に画像がギリギリ収まるまで画像を拡大または縮小する */
.contain {
  object-fit: contain;
}

画像が表示する要素より小さい場合

画像のサイズが表示する要素よりも小さい場合、画像の内容がすべて表示できる最大の大きさまで縦横比を維持して拡大します。

画像が表示する要素より大きい場合

画像のサイズが表示する要素よりも大きい場合、画像の内容がすべて表示できる最大の大きさまで縦横比を維持して縮小します。

scale-downは縦横比を無視して引き伸ばす

object-fit: contain;と同じ動きです。

画像のサイズが表示する要素より小さい場合は元の画像サイズのまま表示します。

object-fit: none;と同じ動きです。

CSSの記述

/* 画像がはみ出さないように縮小する */
.scale-down {
  object-fit: scale-down;
}

画像が表示する要素より大きい場合

画像のサイズが表示する要素よりも大きい場合、縦横比を維持したまま表示する要素に収まるギリギリの大きさまで縮小します。

画像が表示する要素より小さい場合

画像のサイズが表示する要素よりも小さい場合、元の画像をそのまま表示します。

画像と表示する要素のサイズが同じでなければ、表示する要素の縦や横に余白ができます。

まとめ

object-fitの各プロパティによる動作の内容をまとめると以下になります。