画像のトリミングが必要なシチュエーションって結構ありますよね。
静的なコンテンツであれば、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にて対応する必要があります。