How to Fill an Image Size Without Stretching in CSS ?

Last Updated : 08 Feb, 2024

To fill an image in CSS without stretching it, we can use the object-fit property along with the width and height properties. The object-fit: cover property ensures that the image covers the entire container without stretching it. It maintains the aspect ratio of the image and may crop some parts of the image to fit it within the container. Alternatively, the background-size: cover property can also be utilized to achieve the same effect.

Table of Content

Using the object-fit: cover Property
Using background-size: cover Property

Using the object-fit: cover Property

Create an image container and specify the width and height. Set the object-fit: cover property and overflow:hidden property to maintain the image’s aspect ratio and fill the container without stretching the image.

Example: Illustration of Filling CSS Image Size Without Stretching Using the object-fit property.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, 
                                   initial-scale=1.0" />
    <title>Image Without Stretch</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            height: 80vh;
            background-color: #f0f0f0;
            display: flex;
            align-items: center;
            justify-content: center;
        }
 
        h1 {
            text-align: center;
            font-size: 40px;
            color: green;
            margin: 5px;
        }
 
        h2 {
            text-align: center;
            color: crimson;
            margin: 5px;
        }
 
        .main {
            margin-top: 15%;
            width: 100%;
            height: 100%;
        }
 
        .image-container {
            display: grid;
            gap: 20px;
            width: 70%;
            margin: 0px auto;
        }
 
        .original-image,
        .stretched-image {
            width: 100%;
            height: 100%;
            border: 2px solid rgb(255, 0, 221);
            overflow: hidden;
        }
 
        .original-image img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }
 
        .filled-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border: 2px solid blue;
        }
    </style>
</head>
 
<body>
    <div class="main">
        <h1>GeeksForGeeks</h1>
        <div class="image-container">
            <h2>Original Image</h2>
            <div class="original-image">
                <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20231027155426/Best-Front-End-Development-Courses.png"
                     alt="Original Image" />
            </div>
            <h2>Filled Image without Stretch</h2>
            <div class="filled-image">
                <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20231027155426/Best-Front-End-Development-Courses.png"
                     alt="Stretched Image" />
            </div>
        </div>
    </div>
</body>
 
</html>

Output:

Output

Using background-size: cover Property

A centered flex layout with a container containing two image div. The original image display using the <img> tag and the modified one is using background images to achieve a filled appearance without stretching. The original image uses the <img> tag with object-fit: contain, while the modified version employs background images with background-size: cover for a consistent appearance. The fixed width and height of the containers prevent stretching while maintaining the original aspect ratio of the images.

Example: Illustration of Filling CSS Image Size Without Stretching using the background-size: cover property.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, 
                                   initial-scale=1.0">
    <title>Image Without Stretch</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            height: 80vh;
            background-color: #f0f0f0;
            display: flex;
            align-items: center;
            justify-content: center;
        }
 
        h1 {
            text-align: center;
            font-size: 40px;
            color: green;
            margin: 5px;
        }
 
        h2 {
            text-align: center;
            color: crimson;
            margin: 5px;
        }
 
        .main {
            margin-top: 15%;
            width: 100%;
            height: 100%;
        }
 
        .container {
            display: grid;
            gap: 20px;
            width: 70%;
            margin: 0px auto;
        }
 
        .image {
            border: 2px solid rgb(255, 0, 221);
            overflow: hidden;
            width: auto;
            height: 97.5%;
            border-radius: 20px;
        }
 
        img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }
 
        .image-modified {
            border: 2px solid rgb(0, 123, 255);
            overflow: hidden;
            margin: 0 auto;
            width: 100%;
            height: 35vh;
            border-radius: 20px;
            background-size: cover;
            background-position: center;
        }
 
        .image-modified:first-child {
            background-image:
url("https://media.geeksforgeeks.org/wp-content/cdn-uploads/20220519152227/DSA-course-by-Sandeep-Jain-banner.jpg");
        }
    </style>
</head>
 
<body>
    <div class="main">
        <h1>GeeksForGeeks</h1>
        <div class="container">
            <h2>Original Image</h2>
            <div class="image-container">
                <div class="image">
                    <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20220519152227/DSA-course-by-Sandeep-Jain-banner.jpg"
                        alt="Image">
                </div>
            </div>
            <h2>Filled Image without Stretch</h2>
            <div class="image-container">
                <div class="image-modified"></div>
            </div>
        </div>
    </div>
</body>
 
</html>