CSS Click Chart

Object Fit / Object Position

Applies only to replaced elements (images, videos, etc). Allows you to define the scaling and position of a replaced element within its rendered box.

Specification

Object Fit and Object Position on W3C

Example Code

Live Demonstration

A value of "cover" causes this image to slightly overflow its rendered box (140x100), which is defined in the CSS differently from its actual dimensions (200x200).

Object Fit/Position Demo

Browser Support

Can I Use object-fit? Data on support for the object-fit-position feature across the major browsers from caniuse.com.

Tools / Polyfills

Tutorials / Articles