CSS3 Click Chart | CSS3 Browser Support and Information

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.

Specification

Object Fit and Object Position on W3C

Example Code

img {
    width: 140px;
    height: 100px;
    border: solid 1px white;
    -o-object-fit: cover;
    -o-object-position: top center;
    object-fit: cover;
    object-position: top center;
}

Live Demonstration

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

Desktop Browser Support

Standard Syntax:
No support

Vendor Prefix:
Opera 10.6+

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