Maintaining Aspect Ratio while Resizing Images in Web Development

Last Updated : 26 Apr, 2023

When we are working with images in web development, it is a common need for developers to resize the image while keeping its aspect ratio fixed. This can be obtained by using CSS (Cascading Style Sheets).

To know more about image tags, please refer to this article: https://www.geeksforgeeks.org/html-img-tag/

There are many ways to resize the image to fit its container while keeping its aspect ratio. Here, we will discuss two of them.

Approach 1: We can use the max-width and height properties. We set the max-width of the image to 100% and the height to auto.

The max-width property sets the maximum width of the image to 100% of its parent container, which means the image will not exceed the width of its parent element. It ensures that the image does not overflow and disrupt the layout of the webpage on smaller screens.
The height property is set to auto, which means the height of the image will adjust proportionally as the width is scaled down. This ensures that the aspect ratio of the image is maintained and it does not appear distorted or stretched.

Syntax:

Using max-width and height:

img {
      max-width: 100%;
      height: auto;
}

Using object-fit: contain property:

img {
      object-fit: contain;
      max-width: 100%;
}

Example: Using max-width and height properties:

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        Resizing Image while keeping  
        its aspect ratio fixed 
    </title> 
      
    <style> 
        #heading { 
            font-size: 42px; 
            font-weight: bold; 
            color: #009900; 
            margin-left: 20px; 
            margin-top: 5px; 
        } 
  
        .box { 
            width: 200px; 
            height: 300px; 
            border: 2px solid green; 
        } 
  
        img { 
            max-width: 100%; 
            height: auto; 
        } 
    </style> 
</head> 
  
<body> 
    <div id="heading"> 
        GeeksforGeeks 
    </div> 
      
    <div class="box"> 
        <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20210915115837/gfg3-300x300.png"
            alt="GeeksforGeeks" /> 
    </div> 
</body> 
  
</html>

Output:

Approach 2: We can use the object-fit: contain property to resize the image to fit the container while keeping its aspect ratio fixed.

When object-fit: contain; is applied to an image element, it means that the aspect ratio of the element will be maintained, while the entire element fits inside its container. If the aspect ratio of the image element is different from its container, then the element will be scaled proportionally to fit inside the container, without losing its original aspect ratio.

Example: Using object-fit: contain property:

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        CSS force image resize and  
        keep aspect ratio 
    </title> 
      
    <style> 
        #heading { 
            font-size: 42px; 
            font-weight: bold; 
            color: #009900; 
            margin-left: 20px; 
            margin-top: 5px; 
        } 
  
        .box { 
            width: 200px; 
            height: 300px; 
            border: 2px solid green; 
        } 
  
        img { 
            max-width: 100%; 
            object-fit: contain; 
        } 
    </style> 
</head> 
  
<body> 
    <div id="heading"> 
        GeeksforGeeks 
    </div> 
      
    <div class="box"> 
        <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20210915115837/gfg3-300x300.png"
            alt="GeeksforGeeks" /> 
    </div> 
</body> 
  
</html>