CSS Object-Fit is awesome

23th October, 2019 - 1 min. read - in Tutorials - Go to Index

[Hold on] I've made a tool to help people building presentations the modern way.
If you are curious, here the starting point. [/Hold on]

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.