How to Control the Size of an Image without Stretching in CSS ?

Last Updated : 20 Jun, 2024

Controlling the size of an image while maintaining its aspect ratio is a common challenge in web design. Directly setting an image's width and height can lead to stretching or squashing, distorting the original aspect ratio. Fortunately, CSS offers several techniques to resize images without distortion. This article explores various approaches to achieve this, ensuring your images remain responsive and visually appealing.

Table of Content

Approach 1: Using max-width and max-height
Approach 2: Using object-fit Property
Approach 3: Using background-image

Approach 1: Using `max-width` and `max-height`

Setting max-width and max-height properties allows an image to scale down if it's too large but remain unchanged if it's smaller than the maximum dimensions specified. This approach maintains the image's aspect ratio automatically.

HTML

<!DOCTYPE html> 
<html lang="en"> 

<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0"> 
    <title>Control Image Size</title> 
    <style> 
        img.responsive { 
            max-width: 100%; 
            max-height: 300px; 
            display: block; 
            margin: auto; 
        } 
    </style> 
</head> 

<body> 
    <img src=" 
https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" 
        alt="Responsive Image"
        class="responsive"> 
</body> 

</html>

Output

Approach 2: Using `object-fit Property`

The object-fit property specifies how the content of a replaced element, such as an <img> or <video>, should be resized to fit its container. Using object-fit: contain; ensures that the image's aspect ratio is preserved as it scales to fit the container.

HTML

<!DOCTYPE html> 
<html lang="en"> 

<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0"> 

    <title>Object Fit Example</title> 

    <style> 
        .container { 
            width: 100%; 
            height: 300px; 
            overflow: hidden; 
        } 

        .container img { 
            width: 100%; 
            height: 100%; 
            object-fit: contain; 
        } 
    </style> 
</head> 

<body> 
    <div class="container"> 
        <img src= 
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
        alt="Object Fit Image"> 
    </div> 
</body> 

</html>

Output

Approach 3: Using `background-image`

Another method involves using CSS background properties to control the size of an image. This is particularly useful when you need the image to serve as a background and want to avoid stretching.

HTML

<!DOCTYPE html> 
<html lang="en"> 

<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0"> 
        
    <title>Background Image Example</title> 

    <style> 
        .background-container { 
            width: 100%; 
            height: 300px; 
            background-image: url( 
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png'); 
            background-size: contain; 
            background-position: center; 
            background-repeat: no-repeat; 
        } 
    </style> 
</head> 

<body> 
    <div class="background-container"></div> 
</body> 

</html>

Output

Maintaining the aspect ratio of images while resizing is crucial for preserving their visual integrity. By using CSS properties such as max-width, max-height, object-fit, and background-image, you can ensure that your images remain responsive and visually appealing across different screen sizes and devices.

How to control scrolling of image using CSS ?

vkash8574

Improve

Article Tags :

How to Control the Size of an Image without Stretching in CSS ?

Approach 1: Using max-width and max-height

Approach 2: Using object-fit Property

Approach 3: Using background-image

Similar Reads

Thank You!

What kind of Experience do you want to share?

Approach 1: Using `max-width` and `max-height`

Approach 2: Using `object-fit Property`

Approach 3: Using `background-image`