CSS Object-Fit is awesome
Posted on October 23, 2019 in
1 min read
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.