How To Auto-resize An Image To Fit A Div Container Using CSS?

Trang chủ » Html Background Image Stretch To Fit Div » How To Auto-resize An Image To Fit A Div Container Using CSS?

Có thể bạn quan tâm

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

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:1pxsolid#ccc; } 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:

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:1pxsolid#ccc; } 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:

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:1pxsolid#ccc; overflow:hidden; } .containerimg{ width:100%; height:auto; display:block; } </style> </head> <body> <div class="container"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-25.png" 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= "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.

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.

S

Sabya_Samadder Follow Improve Previous Article How to use a not:first-child Selector in CSS? Next Article How to Disable Resizable Property of Textarea using CSS?

Từ khóa » Html Background Image Stretch To Fit Div