CSS Object-Fit is awesome

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

Hey, before scrolling, I've made a tool to help people building presentations the modern way.
If you don't mind, I'd like to ask some feedback about it. Here the starting point to learn more.
Much appreciated!

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.