Using object-fit: cover to preserve image quality

February 12, 2024

The CSS property object-fit determines how an image or a video should be resized to fit its container. The value of cover helps fit and crop an image within a container without distorting its aspect ratio.

CSS Demo: object-fit: cover

Your JS is turned off. Please turn it on to see the CodePen. Here's a screenshot from the Pen

Try reload the page, our check out the pen on CodePen

You can see the full screen version here