Open In App

How to auto-resize an image to fit a div container using CSS?

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

To resize an image or video to fit inside a div container, you can use the object-fit property. This property is used to specify how the content should fit inside the container. With object-fit, you can set the content to maintain its aspect ratio or stretch to fill the entire container. This allows you to control how the content is displayed within a specific div container.

Example 1: This example describes the auto-resize image fit to the div container. This example does not contain object-fit property. 

html




<!DOCTYPE html>
<html>
 
<head>
    <title>To auto-resize an image</title>
    <style>
        body {
            display: flex;
            justify-content: center;
        }
 
        .geeks {
            width: 60%;
            height: 300px;
            border: 1px solid #ccc;
        }
 
        img {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
 
<body>
    <div class="geeks">
        <img src=
             alt="Geeks Image" />
    </div>
</body>
 
</html>


Output:

In the above example as the object-fit property is not used, the image is being squeezed to fit the container, and its original aspect ratio is destroyed.

Example 2: This example is used to display the part of image when use resize the div container. 

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>To auto-resize an image</title>
    <style>
        body {
            display: flex;
            justify-content: center;
        }
 
        .geeks {
            width: 60%;
            height: 300px;
            border: 1px solid #ccc;
        }
 
        img {
                width:100%;
                height:100%;
                object-fit:cover;
            }
    </style>
</head>
 
<body>
    <div class="geeks">
        <img src=
             alt="Geeks Image" />
    </div>
</body>
 
</html>


Output:

Screenshot-2024-01-16-131125

Note: Using object-fit: cover; will cut off the sides of the image, preserving the aspect ratio, and also filling in space.

Example 3: This example displays an image without using object-fit property. In this example, the size of the image is set manually and the image will not be able to maintain its aspect ratio and adjust or resize according to div container on resizing the browser window. 

html




<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>Auto-resize of an image</title>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <style>
        body {
            display: flex;
            justify-content: center;
        }
 
        .container {
            width: 400px;
            height: 250px;
            border: 1px solid #ccc;
            overflow: hidden;
        }
 
        .container img {
            width: 100%;
            height: auto;
            display: block;
        }
    </style>
</head>
 
<body>
    <div class="container">
        <img src=
             alt="GeeksforGeeks Image">
    </div>
</body>
 
</html>


Output:

Screenshot-2024-01-16-130350

Example 4: This example displays the part of image or image using object-fit property. In this example, the size of the image is set manually and the object-fit property is also used. In this case, on resizing the browser the image will maintain its aspect ratio and will not be resized according to div container. 

html




<!DOCTYPE html>
<html>
 
<head>
    <title>To auto-resize an image</title>
    <style>
        body {
            text-align: center;
        }
 
        img {
            width: 400px;
            height: 200px;
            object-fit: cover;
        }
    </style>
</head>
 
<body>
    <img src=
         alt="Geeks Image">
</body>
 
</html>


 Output:                                                            Note: The property object-fit: cover; will cut the sides of the image, preserving the aspect ratio, and also filling in space.

CSS is the foundation of webpages, is used for webpage development by styling websites and web apps. You can learn CSS from the ground up by following this CSS Tutorial and CSS Examples.



Last Updated : 25 Jan, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads