object-fit-images demo

`object-fit` is

`object-position` is

OFI is automatically skipped.

Resize the window to see how they behave.

unmodified <img>

`object-fit`

fill (default)

contain

cover

none

scale-down

(no object-fit)
cover @ <700px

`object-fit` + `object-position`

object-fit: cover

object-fit: cover
object-position: center 80%

Responsive images (with picturefill where needed)

srcset + contain (@1x, @2x, @3x)

Detect new images automatically