【CSS】imgの画像をピッタリ合わせるobject-fit

古くから、CSSで画像をフレキシブルに横いっぱいに広げたい場合

.image {
  width: 100%;
  height:auto;
}

このように横幅100％、縦幅autoにimgタグを指定することで再現していました。現在もこのような指定の仕方がメインです。

ただし、サムネイル一覧ページなどを作る場合、この方法で画像を並べた場合は画像のサイズが揃っていることが必須になります。
つまりサイズがバラバラの画像を並べる場合にはこのCSSの指定だと問題が発生することになります。

divでサイズを指定して、overflow:hiddenではみ出たところをカットする方法で対処する方法もあるのですが、その場合極端な比率の画像が混じっていた場合隙間が発生するので、完全な解決にはなりませんでした。

CMSを使ってアップロードした画像のサイズを整えたらOKではあるのですが、CMSを使えない場合や、もらった画像のサイズがすべてバラバラな場合、その画像のサイズをすべてリサイズし直すのはかなり手間になります。また、その作業を更新する度に行うのであるならば、なおさら簡単にしておきたいものです。

そこで、モダンなCSSである「object-fit」の出番になります。

.images {
  object-fit: cover;
  object-position: center center;
  width: 100%;
  height: 100%;
}

object-fitを使用することで、画像はアスペクト比を維持したまま指定の範囲内でサイズを伸縮することが出来ます。

object-fit: cover で指定した範囲内全部が埋まるように画像を調整します。
object-fit: contain は指定範囲内に画像が全部表示されるように画像を調整します。
object-position は画像を調整する場合のポジションをどのようにするかを設定できます。
widthとheightは画像のサイズをどのようにするのかを指定します。画面いっぱいにするのでしたらwidthもheightも100％です。単純な指定とは違い、object-fitは画像のアスペクト比を固定したまま拡大縮小します。そのため、画面いっぱいに指定するのでしたら、widthもheightも画面いっぱいの100%を指定することになります。

この様に、object-fitを使うことで、画像の表示をCSSでさらにコントロールしやすくなりました。
これによって一番良くなったことと言えば、画面ピッタリに合わせる用途で裏技的にbackgroundを使用して画像を指定する必要が無くなったことです。

これからHTMLで画像を画面いっぱいに貼り付ける用途ではobject-fitを使うととても便利ですよ。