How To Keep Aspect Ratio Of Image In Css

by

Aspect ratio is the proportional relationship between an image’s width and height. Maintaining the aspect ratio of an image is essential for preserving its visual quality and preventing distortion. In this blog post, we will explore various methods to keep the aspect ratio of an image using CSS.

1. Using Padding:

One way to maintain the aspect ratio of an image is by utilizing the padding property in CSS. The idea is to set a percentage-based padding-bottom that corresponds to the desired aspect ratio. For instance, if you have an image with a 4:3 aspect ratio, the padding-bottom value can be calculated as follows:

Aspect Ratio = (Height / Width) * 100% = (3 / 4) * 100% = 75%

Here’s an example of how to apply this technique: 

    <style>
        .image-wrapper {
            width: 100%;
            padding-bottom: 75%; /* 4:3 aspect ratio */
            position: relative;
        }

        .image-wrapper img {
            position: absolute;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
        }
    </style>

In this example, we create a wrapper element with a relative position and set its padding-bottom to the desired aspect ratio. The image inside the wrapper is styled with absolute positioning, 100% width and height, and the object-fit property set to cover to maintain the image’s aspect ratio.

2. Using Aspect Ratio Unit (aspect-ratio):

The new aspect-ratio CSS property allows you to define an element’s aspect ratio directly. This property is quite useful for maintaining the aspect ratio of images and is supported in modern browsers like Chrome, Firefox, and Safari. Here’s an example of how to use the aspect-ratio property: 

    <style>
        img {
            width: 100%;
            aspect-ratio: 4 / 3; /* 4:3 aspect ratio */
            object-fit: cover;
            object-position: center;
        }
    </style>

In this example, we set the image’s width to 100% and directly define its aspect ratio using the aspect-ratio property. The object-fit property is set to cover to maintain the image’s aspect ratio.

Conclusion:

Maintaining the aspect ratio of images is crucial for ensuring good design and user experience. In this blog post, we have discussed two methods to keep the aspect ratio of an image using CSS – the padding technique and the new aspect-ratio property. Choose the method that best fits your project requirements and browser compatibility needs.