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

To auto-resize an image or a video to fit in a div container use object-fit property. It is used to specify how an image or video fits in the container.

object-fit property: This property is used to specify how an image or video resize and fit the container. It tells the content how to fit in a specific div container in various way such as preserve that aspect ratio or stretch up and take up as much space as possible.

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

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html> 
    <html
        <head
            <style>
                .geeks {
                    width:60%;
                    height:300px;
                }
                img {
                    width:100%;
                    height:100%;
                }
            </style>
        </head
        <body>
            <div class = "geeks">
                <img src=
            alt = "Geeks Image" />
            </div>
        </body
    </html>                    

    chevron_right

    
    

    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.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html> 
    <html
        <head
            <style>
                .geeks {
                    width:60%;
                    height:300px;
                }
                img {
                    width:100%;
                    height:100%;
                    object-fit:cover;
                }
            </style>
        </head
        <body>
            <div class = "geeks">
                <img src=
                alt = "Geeks Image" />
            </div>
        </body
    </html>                    

    chevron_right

    
    

    Output:

    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 it’s aspect ratio and adjust or resize according to div container on resizing the browser window.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html> 
    <html
    <head
        <style>
            body {
                text-align:center;
            
            img {
                width:400px;
                height:200px;
            }
        </style
    </head
    <body>
        <img src=
        alt="Geeks Image">
    </body
    </html>                    

    chevron_right

    
    

    Output:

  • Example 4: This example display 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 it’s aspect ratio and will not be resized according to div container.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    Output:

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



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.