CSS3 object-fit/object-position

Overview

The object-fit property specifies how an element's content should fit within the available space, to the 'contain' value will scale down the content to fit the container while respecting its aspect ratio, while the 'fill' value will scale the content to fill the container at the cost of potentially distorting its aspect ratio.

Formal Definition

Specifications

CSS Images Module Level 3 # the-object-position

Syntax

/* <position> values */
 object-position: center top;
 object-position: 100px 50px;
 /* Global values */
 object-position: inherit;
 object-position: initial;
 object-position: revert;
 object-position: unset;

Code snippets

leftbar.html

Source:leftbar.html

parallax.css

Source:parallax.css

01-video-style.html

Source:01-video-style.html

Browser Compatibility