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

30 Jul, 2021
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.<!DOCTYPE html> <html>     <head>         <style>            .geeks {                width:60%;                height:300px;            }            img {                width:100%;                height:100%;            }        </style>    </head>     <body>        <div class = "geeks">            <img src="https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-25.png"         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.
<!DOCTYPE html> <html>     <head>         <style>            .geeks {                width:60%;                height:300px;            }            img {                width:100%;                height:100%;            }        </style>    </head>     <body>        <div class = "geeks">            <img src="https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-25.png"         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.<!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="https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-25.png"             alt = "Geeks Image" />        </div>    </body> </html>                    Output:Note: Using object-fit: cover; will cut off the sides of the image, preserving the aspect ratio, and also filling in space.
<!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="https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-25.png"             alt = "Geeks Image" />        </div>    </body> </html>                    
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.<!DOCTYPE html> <html> <head>     <style>        body {            text-align:center;        }         img {            width:400px;            height:200px;        }    </style> </head> <body>    <img src="https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-25.png"     alt="Geeks Image"></body> </html>                    Output:
<!DOCTYPE html> <html> <head>     <style>        body {            text-align:center;        }         img {            width:400px;            height:200px;        }    </style> </head> <body>    <img src="https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-25.png"     alt="Geeks Image"></body> </html>                    
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.<!DOCTYPE html> <html>     <head>         <style>            body {                text-align:center;            }             img {                width:400px;                height:200px;                object-fit: cover;            }        </style>     </head>     <body>        <img src="https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-25.png"        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.
<!DOCTYPE html> <html>     <head>         <style>            body {                text-align:center;            }             img {                width:400px;                height:200px;                object-fit: cover;            }        </style>     </head>     <body>        <img src="https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-25.png"        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.
HTML is the foundation of webpages, is used for webpage development by structuring websites and web apps.You can learn HTML from the ground up by following this HTML Tutorial and HTML Examples.
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.
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
CSS-Misc
Picked
Technical Scripter 2018
CSS
HTML
Technical Scripter
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to insert spaces/tabs in text using HTML/CSS?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to update Node.js and NPM to next version ?
How to create footer to stay at the bottom of a Web page?
How to apply style to parent if it has child with CSS?
How to insert spaces/tabs in text using HTML/CSS?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to update Node.js and NPM to next version ?
How to set the default value for an HTML <select> element ?
Hide or show elements in HTML using display property