CSSで簡単に画像をトリミング！

ちょっとだけ画像をいじりたい時、ありますよね。

・被写体が寄ってるのが気になる！真ん中にして表示したいなぁ。
・正方形アイコンにしたいけど、中央じゃなくて好きな位置で切り抜きたい！
・一覧表示されるサムネーム画像、比率がバラバラで左右上下に余白が入ってしまう… 。

などなど、フォトショップで一つずつ処理するのは面倒な時は、CSSの「object-fit」プロパティを使いましょう！

今回使う画像はこちら。鳥さんです。かわいいですね！鳥大好きです。
元のサイズは1280×640pxです。

画像のトリミング

まずは単純にCSSで幅300px、縦を300pxを指定してみます。

/* 画像のトリミング */
img.sample {
	width:300px;
	height:300px; 
}

横方向にギュッと潰れて、スリムになってしまいました…。

そこでobject-fit: cover; を追加します。

/* 画像のトリミング */
img.sample {
	width:300px;
	height:300px;
	object-fit: cover;　 /* この一行を追加 */
}

すると、潰れること無く、縦横ど真ん中でキレイにトリミングされました！
魔法の言葉、[object-fit: cover;]！
値に[cover]を指定すると、縦横の小さい方に合わせて画像がリサイズされて、指定された大きさのボックスからはみ出した部分はトリミングされます。
今回は縦の長さに合わせたので、指定した画像エリアからはみ出た左右がカットされました。

ですが、ちょっと右に寄っているのが気になります。
鳥好きとしてはしっぽまで入れたい。もう少し左に寄せたいですね。
ここで[object-position]の出番です。

/* 画像のトリミング */
img.sample {
	width:300px;
	height:300px;
	object-fit: cover;
	object-position:65% 90%;　 /* 1つ目は水平方向、2つ目は垂直方向の位置 */
}

真ん中（50%）よりほんの少しだけ左に寄せました。完璧です！

この画像、もともとはこの表示比率よりも大きな横幅1280pxある画像です。
上記までは縦横の比率を維持するため、縮小されて表示されていました。
648pxの高さがある画像を、CSSで指定された300×300ｐｘにリサイズ表示されていたわけです。

鳥好きとしては縮小されない、100％の鳥さんも見てみたい。
そんな時は拡大縮小せず、トリミングのみを行います。
指定するのは先ほどの[object-fit]プロパティ。値を[none]にします。
ついでに[object-position]プロパティでベストポジションを指定したのが下のコードです。

/* 画像のトリミング */
img.sample {
	width:300px;
	height:300px;
	object-fit: none;　/*拡大縮小をしない*/
	object-position:45% 28%;
}

拡大縮小せず、鳥さんだけを300×300pxでトリミングすることができました。
上記で表示に使用している画像は1枚のみ。
フォトショップを使用せず、CSSのトリミングだけでもここまでできました。

object-fit プロパティの値一覧

fill

ボックス内を埋めるよう、縦横の比率を変えながらリサイズされます。
※アスペクト比を維持しないので歪む可能性があります。

contain

縦横のアスペクト比を維持したまま、ボックスに収まるようにリサイズされます。
たりない部分は余白が付きます。

cover

縦横のアスペクト比を維持したまま、ボックスを埋めるようにリサイズされます。
縦横の小さい方を基準にしてリサイズし、ボックスからはみ出た部分はトリミングされます。

none

リサイズをせず、元画像そのままで指定のボックスを覆うように埋めます。

scale-down

none と contain のうち、小さい方のサイズに合わせてリサイズします。

対応ブラウザ

とても便利なobject-fit、object-positionプロパティですが、残念な事にIEと古いEdge（新しいEdgeでは対応）では対応しておりません。
どうしても古いブラウザやIEでも対応させたい！という場合は[object-fit-images]で対応可能です。
[object-fit-images]についてはまた今度追記します！