Demo page for object-fit-images

object-fit natively supported here, fix skipped.

object-fit is not natively supported in this browser.

Resize the window to see how they behave.

unmodified <img>

object-fit

fill (default)
contain
cover
none
scale-down
contain
cover @ <700px

object-fit + object-position

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

Responsive images (with picturefill where needed)

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

Detect new images automatically