CSS Object-Fit is awesome

The CSS object-fit property is simply great.

Here an example on what you can do with it together with flex, centering and scaling an image in a container maintaining the image proportion:

Here the relevant parts:

Set the container as flex and center its content:

.wrapper{
  display: flex;
  align-items: center;
  justify-content: center;
}

and here the part for the image in order to scale it proportionally:

.wrapper img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}

Simple as that!

Here the Codepen.

Spotted a typo or (likely) a grammar error? Send a pull request.

You May Also Enjoy: