画像や動画を自動トリミング、object-fit

画像スライドやリスト表示のように複数の画像を並列させるとき、画像のアスペクト比（縦横の比率）がバラバラだと、表示が凸凹になってしまい見づらくなってしまったり、サイズを統一しようとして画像が潰れてしまったりします。

極端な見本としては以下のような感じですね。

あらかじめアスペクト比を統一しておけば良いのですが、たとえばPCでは縦長、モバイル端末では横長に表示させたい場合などもあります。

そういうときに便利なのが、画像のトリミング表示できるobject-fitプロパティです。

使い方としてはbackground-sizeプロパティに近いので、background-sizeが分かっていれば理解しやすいと思います。

置き換え要素のトリミングができるobject-fit

imgやvideo、iframeなどは、「タグの場所に、src=”” で読み込んだ別URLを表示させている」わけで置き換え要素と呼ばれます。

object-fitプロパティはこの置き換え要素に対して使用できます。例ではimgタグで説明していますがimg以外にも使えます。

object-fitで指定できる値は以下の５種類です。

none	指定しない（初期値）
cover	アスペクト比を変更せずに　隙間なく拡大/縮小(表示されない部分がある)
contain	アスペクト比を変更せずに　全体を表示(余白が出来る場合がある)
fill	(必要な場合)アスペクト比を変更して　隙間なく拡大/縮小
scale-down	noneとcontainを比較し実際の表示サイズが小さくなる方を採用する

contain、coverなどbackground-sizeとほとんど同じですね。

imgタグのサイズに対して画像の表示サイズを変更するので、「imgタグのwidth・heightが未指定」だとエラーになります。

この辺りが勘違いされがちなのですが、object-fitプロパティは、imgタグ自体が（親要素に対して）どのように表示されるのか指定するのではありません。

imgタグの中で、呼び出す画像をどう表示させるのかを指定しています。

ここを間違うと次のobject-positionでも誤解するので、しっかりと理解しておきましょう。

object-fitの表示例

最初のサンプルを使って実際の表示例を掲載しておきます。
画像サイズを横300px たて150pxに統一し、object-fitプロパティで表示方法を変更します。縦長の画像が一番分かりやすいと思います。
imgタグにはborderをつけています。

object-fit : contain

object-fit : cover

object-fit: fill

object-fitの基準位置を指定するobject-position

object-fitプロパティを指定しているとき、その基準となる位置を指定するのがobject-positionです。(* object-fitが未指定であれば無効です。)

object-fitはbackground-sizeにたとえましたが、object-positionはbackground-positionにたとえられます。指定方法も同じで、キーワード または％を使った指定が基本です。
初期値は50% 50% (center) です。

object-positionで利用できるキーワード

top / right / left / bottom / center /
top left / top right / bottom left / bottom right

object-positionの使用例

object-positionの値にpx指定すると起点指定になる

object-positionの値をpxだけで指定すると、表示領域の左上の起点を指定します。
マイナスの値でも有効。

この記事で使用した画像について
画像引用元：https://pixabay.com/users/kellepics-4893063/