object-fit for images and video

2020-05-15

 | 

~1 min read

 | 

91 words

object-fit is a CSS property that can be applied to images and video. It determines how the replaced element (i.e. the img or video tag) are resized to fit its container.

It has five options:

  1. fill (default)
  2. contain
  3. cover
  4. none
  5. scale-down

MDN has a nice demo to see how these can be used, but a quick trick is to use the contain option to maintain the aspect ratio of your content without cropping.

For example:

.scaled-imaged {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

Hi there and thanks for reading! My name's Stephen. I live in Chicago with my wife, Kate, and dog, Finn. Want more? See about and get in touch!