CSS trick to easily align different images without distortion

by

On many occasions we find that we have to present very different images in an orderly way, so we want to align them horizontally and vertically.

What is the problem? That if we force a fixed width and height, the images are distorted if they are of a different proportion.

Here is the video tutorial:

Subscribe to my channel:  

Let's imagine we have the following images that we want to align:

different images

If we change the width and height to 100px we get the following distorted result:

img {
    height: 100px;
    width: 100px;
}

distorted images

But if we add the object-fit property to the CSS:

img {
    height: 100px;
    width: 100px;
    object-fit: cover;
}

The result will be:

undistorted images

Believe me this little code can save you from a lot of trouble 😉

Leave a comment