こんにちは、Webプログラマーのトムです。
さて今回は、画像の拡大・縮小において非常に便利なプロパティである”object-fit”の使い方について解説していきます。以前に画像の拡大・縮小（リサイズ）について解説しましたが、今回はその続きな感じです。
今回のポイント・・・”object-fit:cover” を1行書けば、画像を指定したサイズにフィットさせ、且つ余計な部分を自動的にトリミングしてくれる
object-fitプロパティでできること
今回取り扱うobject-fitプロパティで何が簡単にできるのかというと、繰り返しになりますが「画像を指定したサイズにフィットさせ、且つ余計な部分を自動的にトリミングしてくれる」ことです。
この仕様が活用される場面としては、例えばブログや企業サイトで見かける↓のようなデザインのWebサイトです。
特選ツアー
お一人様 \198,000
お一人様 \178,000
お一人様 \248,000
↑の例では３つの画像を使ってますが、元の解像度がバラバラであっても表示されるサイズは全て同じにして、且つ表示される部分はお客さんの目を引く領域（多くの場合は画像の真ん中だと思います）でなければなりません。こういったニーズをobject-fitプロパティを使うことで簡単に実現できます。早速試してみましょう。
今回コードに用いるサンプル画像を以下に表示します。縦長と横長の2種類の画像を用います。
画像を指定サイズにフィットさせ自動的にトリミング・・・cover オプション
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>object-fitのテスト</title>
<link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<!-- 縦長画像の表示 -->
<img src="https://drive.google.com/uc?export=view&id=1A6F3pwN6r7UFW3sBU90yLJUPG4cVqDmN" alt="縦長">
</body>
</html>
CSS
img {
width: 300px;
height: 300px;
object-fit: cover;
}実行結果
See the Pen object-fit_01 by トム@株＆不動産投資・Webプログラマー (@roby_tom) on CodePen.
画像のサイズを300×300に指定し、”object-fit: cover”を記述しています。実行結果をみてください。縦長、横長どちらの画像も縦横比が変わらない状態で真ん中（犬の顔と身体）にフォーカスされ、余分な部分はトリミングされていることが分かります。たった１行の追加でこれが実現できるのが、object-fit: cover になります。
今回の記事のメインはこの “object-fit: cover”になります。便利なのでぜひ覚えてください。
指定サイズに縦横比を変えないで画像を入れ込む・・・contain オプション
今度はcoverとは別のオプションであるcontainオプションを使ってみます。
img {
width: 300px;
height: 300px;
object-fit: contain;
}See the Pen object-fit_02 by トム@株＆不動産投資・Webプログラマー (@roby_tom) on CodePen.
300×300の枠に対して、画像全体を縦横比を変えない形で縮小して表示されます。元々の画像は正方形ではありませんので、余った領域は空白になっていることが分かります。
指定サイズに縦横比を変えて画像を入れ込む・・・fill オプション
img {
width: 300px;
height: 300px;
object-fit: fill;
}See the Pen object-fit_03 by トム@株＆不動産投資・Webプログラマー (@roby_tom) on CodePen.
fillオプションはcontainとは異なり、指定された画像サイズに対し、元画像の縦横比を変えて全体を入れ込む動作をします。横長の画像は縦に引き伸ばされ、縦長の画像は横に引き伸ばされて、300×300のサイズで表示されていることが分かります。
object-fitのデフォルト値はfillです。またnoneやscale-downと言った別のオプションもありますが、あまり使わないと思いますので割愛します。
ちなみにcover、containといったオプションでピンと来た方もいらっしゃるかもしれませんが、以前解説した「背景画像の拡大・縮小」の、”background-size”プロパティのオプションと動作が似ています。まとめて覚えておくと良いと思います。
とにもかくにも、”object-fit: cover”によって、画像を指定したサイズにフィットさせ、且つ余計な部分を自動的にトリミングしてくれる、これが今回最も重要なポイントです。ぜひ使いこなしましょう。
今回は以上です！