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を指定します
  • imgobject-fitwidth heightを指定します

解説

よく使うのはobject-fit: containobject-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を指定する必要があります。
例えば親要素divheight: 250pximgheight: 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');
  }
});
}
  • このエントリーをはてなブックマークに追加

プロフィール

kura

WEBで食べていきたいWEBデザイナーです。
WEBデザイン初心者向けになるべく分かりやすいように解説しています。 そのほか、WEBデザインの便利ツール紹介、開発したりしています。