CSS3 Click Chart

Object Fit / Object Position

Applies only to replaced elements. Allows you to define the scaling and position of a replaced element within its rendered box.


Object Fit and Object Position on W3C

Example Code

Live Demonstration

A value of "cover" causes this image to overflow its rendered box.

Object Fit/Position Demo

Browser Support

Tools / Polyfills

jQuery.object-fit.js (currently only supports object-fit: contain)

Tutorials / Articles

The CSS3 object-fit and object-position properties
Control image aspect ratios with CSS3

Fork me on GitHub