CSSだけで画像をトリミングする

CSSだけで画像をトリミングする

position: absolute;

要素からはみ出した部分を非表示にする方法

DEMO

See the Pen mLVJzL by mizusawa (@webty_mizusawa) on CodePen.

サンプルコード

object-fit: cover;

object-fit: cover; だけで簡単に画像をトリミングする方法

DEMO

See the Pen OZMVZo by mizusawa (@webty_mizusawa) on CodePen.

サンプルコード

Can I use object-fit ?


今回二つの方法を紹介しましたが object-fit: cover; のブラウザ対応状況をCan I useで見ますと現在IEだけが対応していません。

なので、object-fit: cover; を利用する場合は、IEだけ別の方法で画像をトリミングするなどの対処が必要になります。