KOYO DIGITAL WORKSパーツギャラリー

画像のトリミングができる「object-fit」

  • Chrome
  • Firefox
  • Edge

CSS3のobject-fitプロパティは、置換要素(img要素やvideo要素など)をボックスへどのようにはめ込むかを指定できます。

object-fit: fill;(初期値)

See the Pen object-fit: fill by yukako (@KDWyukako) on CodePen.

object-fit: contain;

See the Pen object-fit: contain by yukako (@KDWyukako) on CodePen.

object-fit: cover;

See the Pen object-fit: cover by yukako (@KDWyukako) on CodePen.

object-fit: none;

See the Pen object-fit: none by yukako (@KDWyukako) on CodePen.

object-fit: scale-down;

See the Pen object-fit: scale-down by yukako (@KDWyukako) on CodePen.

ボックスサイズと置換要素の実寸サイズの大小関係に応じて、contain または none を指定したときと同じ表示となる。

参考URL:object-fit-CSS3リファレンス

おすすめコンテンツ

リッチな動きをWebサイトに パーツギャラリー デザインギャラリー
ページの先頭へ