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

object-fitプロパティ


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

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

samplesamplesamplesamplesample

samplesamplesamplesamplesamplesample

samplesamplesamplesamplesample

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

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

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

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

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

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

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

none指定しない(初期値)
coverアスペクト比を変更せずに 隙間なく拡大/縮小(表示されない部分がある)
containアスペクト比を変更せずに 全体を表示(余白が出来る場合がある)
fill(必要な場合)アスペクト比を変更して 隙間なく拡大/縮小
scale-downnoneと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

samplesamplesamplesamplesample

samplesamplesamplesamplesamplesample

samplesamplesamplesamplesample

object-fit : cover

samplesamplesamplesamplesample

samplesamplesamplesamplesamplesample

samplesamplesamplesamplesample

object-fit: fill

samplesamplesamplesamplesample

samplesamplesamplesamplesamplesample

samplesamplesamplesamplesample

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-fit: contain

object-position: left

object-fit: fill

object-position:top

object-fit: cover

object-position: 20% 100%

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

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

object-position:30px 50px

object-position: -30px -50px

object-position:50px

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

23:40まで受講できるから、仕事と両立できるHTML5/CSS3コース[オンライン]

2020年4月5日HTML/CSScss,object-fit

Posted by ミフネWEB