CSSに1行追加するだけ!画像をトリミングしてみよう

画像の一覧を表示することはよくあることですが、画像のサイズが全部同じ・・・ということはほとんどありません。
追加の都度、加工ソフトで編集するのも手間がかかります。
そういう時は、CSSでトリミングできるようにしておくととても便利です!

今回は「CSSに1行追加して、画像をトリミングする方法」をご紹介します。

今回使用する画像

縦長と横長の画像2種類を使用します。
まぁよくありますよね、この手のサイズの画像。

画像を中央の位置でトリミング

縦350px、横350pxのサイズを指定してみます。

CSS
.img{
	width:350px;
	height:350px;
}

こんな感じで何とも残念な結果になります。
そこで、先ほどのCSSに「object-fit:cover;」を追加します。

CSS
.img{
	width:350px;
	height:350px;
	object-fit:cover;
}

縦横の比率を維持したまま、指定した枠内にぴったりはまりました。
今まではpositionとかで枠内にはまるようにするケースが多かったのですが、
1行追加するだけでOKなのでとても簡単!!

私、この方法を知った時は鳥肌が立ちました。
全身ぞわぞわチョコボ肌。
よくぞやってくれた、エライ人。

画像を任意の位置でトリミング

中央以外の位置でトリミングしたい場合は、object-positionを使用します。
左上を基準として、object-position:横の位置 縦の位置; を記述します。

CSS
.img{
	width:350px;
	height:350px;
	object-fit:cover;
}

.left_bottom{
	object-position:0 100%;
}

.right_top{
	object-position:100% 0;
}

左:左下(object-position:0 100%;)
右:右上(object-position:100% 0;)

パーセントだけではなく px で指定も出来るので、
細かく位置の指定をすることも可能です。

object-fit で使用できる値

object-fitでは、cover以外にも様々な値が用意されています。
場面に応じて使い分けてみてください。

contain

縦横のサイズ比率を維持したまま、コンテンツボックスに収まるように拡大縮小されます。
幅と高さのどちらか大きい方に合わせてリサイズします。

cover

縦横のサイズ比率を維持したまま、コンテンツボックス全体を覆うようにして拡大縮小されます。
縦横の小さい方を基準として、はみ出た分をトリミングします。

fill(初期値)

コンテンツボックスに収まるように拡大縮小されます。

none

拡大縮小せず、そのまま表示します。

scale-down

noneまたはcontainのうち、小さい方のサイズに合わせて表示します。

object-fitをIEやEdgeに対応させるには

こんなに便利なobject-fit、実はIEやEdgeでは対応していません
対応させるには、「object fit images」というJSを使用します。
導入方法については以下のサイトで詳しく紹介されています。

>>画像のサイズ調整に便利な「object-fit」をIEやEdgeに対応させる方法
https://www.e-webseisaku.com/column/web/3690/

一度覚えるととても便利なobject-fit、ぜひともご活用ください!