Created: January 13th 2021
Last updated: January 13th 2021
Categories: Common Web Development, IT Development
Author: Marcus Fleuti
Last updated: January 13th 2021
Categories: Common Web Development, IT Development
Author: Marcus Fleuti
CSS: Image resizing in flex-container made easy with object-fit
You probably know that image resizing can get annoying pretty quickly. Your image gets stretched and doesn't keep it's proportions.
The Solution
With the CSS3 property object-fit you can tell the image how to fit inside a box (for best results use flexbox). This CSS property is similar to the background-image options. There are some options:
- fill -> stretches object to fill the box
- contain -> fit according to aspect ratio
- cover -> overflows box but maintains ratio