CSS object-fitを使って画像を要素いっぱいに表示する

CSSのobject-fitは画像を要素内でどのように表示するか指定するプロパティ。object-fitを使用すれば画像を縦いっぱい広げたり、上下隙間なく要素のサイズに合わせて拡大することができます。

関連記事

• 画像を背景画面いっぱいに表示する

デモ

See the Pen
Untitled by kura (@kuranopen)
on CodePen.

使い方

HTML

<div><img src="https://picsum.photos/id/237/960/540"></div>

CSS

figure {
  width: 250px;
  height: 250px;
}
img {
  object-fit: contain;
  width: 100%;
  height: 100%;
}

• imgの親要素にwidth heightを指定します
• imgにobject-fitとwidth heightを指定します

解説

よく使うのはobject-fit: containとobject-fit: coverの2つ。覚えておきましょう。

object-fit: contain

アスペクト比を維持して拡大縮小。

object-fit: cover

アスペクト比を維持して要素全体に表示されるように拡大縮小。

object-fit: none

拡大縮小されずに表示。

object-fit: scale-down

object-fit: containとほぼ同じ。
小さいサイズの方が優先されます。

画像位置の調整「object-position」

object-positionで要素内の画像の位置を指定できます。
初期値は中央です。

左上

object-position: left top;

右上

object-position: right top;

左下

object-position: left bottom;

右下

object-position: right bottom;

数値と%でも指定可

左上から計算されます。

object-position: 50px 100px;

object-position: 30% 20%;

よくあるトラブル

画像が縦に拡大されない

imgとその親要素にheightを指定する必要があります。
例えば親要素divにheight: 250px、imgにheight: 100%を指定してみましょう。

縦長画像は要素内に収め、横長画像は拡大する

object-fitは便利ですが、縦長画像と横長画像どちらも拡大して表示されます。そこでJavascriptを使って縦長画像も要素内に収めるようにします。

CSS

.fit-image {
  object-fit: contain;
}

Javascript

// 縦長画像は要素内に収める
$('.fit-image').each(function(){
  var width = this.naturalWidth;
  var height = this.naturalHeight;
  if(width < height){
    $(this).addClass('height-image');
  }
});
}

デザインを本で学びたい人向けの記事

初心者ノンデザイナーがこれからデザインを勉強するのにおすすめの本 4選