Adjusting Image Aspect Ratio in CSS (Code Snippet)

Have you ever found yourself working on a website and struggling to keep images in an aspect ratio when getting them to fit in the space provided? Look no further than this awesome CSS property.

.image-1{
    aspect-ratio: 4/3;
}
.image-2{
    aspect-ratio: 1.25;
}
.image-3{
    aspect-ratio: 16/9;
}

So if you applied the 3 different rations to images you will get the below outcome.

Support for aspect-ratio according to caniuse.com is now available on all major browsers, so in my opinion definitely safe to start using.