Before you go, check out these stories!

0
Hackernoon logoHow to De-Squeeze an Image Using CSS by@niiazaly-dhumaliev

How to De-Squeeze an Image Using CSS

Author profile picture

@niiazaly-dhumalievNiiazaly Dzhumaliev

Software Developer

All images have different sizes. But most of the time we want to place an image and define dimensions by ourselves. By default, the whole image squeezed according to the given width and height. For instance, if you want to place an image with a width of 400px and a height of 500px the image will look like this:

The discrepancy between the original and the defined image sizes leads us to the issue. It is eye-catching at first glance and disrupts the UI.

To fix the squeezing, CSS has a convenient property called object-fit with cover value. What does it do?

When we apply

"object-fit: cover"
it will crop the sides of an image and maintain its aspect ratio. Now we have de-squeezed image alongside with squeezed one.

Conclusion:

With

object-fit cover
images in your project will look
well sized.

Tags

Join Hacker Noon

Create your free account to unlock your custom reading experience.