画像のトリミングはCSSで。object-fitで一発解決!

画像のトリミングが必要なシチュエーションって結構ありますよね。

静的なコンテンツであれば、Photoshopを開いて加工すればいい話なのですが、
ブログの画像などの動的なコンテンツとなるとそうはいきません。

画像は、正方形なのか縦長なのか横長なのか・・・、
これまではposition(CSS)やjavascriptをフル活用して対処していましたが、
CSSの「object-fit」活用すれば一発解決します。

例えばこのような横長画像があったとして、

枠線内のエリアでトリミングしたい場合、

まずはimgに対して、幅と高さを指定します。

width: 250px;
height: 250px;

それだけだと当然つぶれたように表示されますし、まだトリミングされていません。
ここでobject-fixを指定します。

object-fix: none;

そしてトリミング位置もあわせて指定します。(デフォルトは左上が起点)

object-position: 50% 0;

うまく表示されました!

「object-fix」は多くのプロパティを持っていますので、
うまく活用すればレスポンシブ対応時に大活躍してくれます。

※現時点(18/6/14)では、IEとEdgeは未対応ですので、
別途jsにて対応する必要があります。