CSS Interview Questions

28 Questions
HTML & CSS

HTML & CSS

Web DevelopmentFrontend

Question 24

What is the object-fit property, and how is it used with images?

Answer:

The object-fit property in CSS is used to control how the content of a replaced element, such as an image or video, is resized to fit its container. It defines how the content should be resized to fit the dimensions of the container while preserving the aspect ratio or filling the space.

This property is particularly useful when working with images, as it allows you to determine how an image should scale or crop within a defined space (like a fixed-width and height container) without distorting the image's aspect ratio.

Values of object-fit

The object-fit property accepts the following values:

  1. fill (default)

    • The content is resized to fill the container completely. This may distort the image if the aspect ratio of the content differs from the aspect ratio of the container.
    img {
    object-fit: fill;
}

  2. contain

    • The content is resized to fit within the container while preserving its aspect ratio. The entire image will be visible, but there may be empty space in the container (letterboxing or pillarboxing).
    img {
    object-fit: contain;
}

  3. cover

    • The content is resized to cover the entire container while preserving its aspect ratio. Some parts of the content may be cropped if the aspect ratio of the content differs from the container's aspect ratio.
    img {
    object-fit: cover;
}

  4. none

    • The content is not resized. It is displayed at its original size. If the content is larger than the container, it will overflow.
    img {
    object-fit: none;
}

  5. scale-down

    • The content is sized as either contain or none, whichever results in a smaller size. In other words, it scales the image down to the smallest size that fits within the container or displays the image at its original size if it is smaller than the container.
    img {
    object-fit: scale-down;
}

Example Usage of object-fit with Images

Here’s how the object-fit property can be used with images in different scenarios:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Object-Fit Example</title>
    <style>
        .container {
            width: 300px;
            height: 200px;
            border: 2px solid #333;
            margin-bottom: 20px;
            overflow: hidden; /* Ensures content doesn't overflow container */
        }

        .fill img {
            object-fit: fill;
        }

        .contain img {
            object-fit: contain;
        }

        .cover img {
            object-fit: cover;
        }

        .none img {
            object-fit: none;
        }

        .scale-down img {
            object-fit: scale-down;
        }

        img {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>

    <div class="container fill">
        <img src="https://via.placeholder.com/500x300" alt="Fill">
    </div>

    <div class="container contain">
        <img src="https://via.placeholder.com/500x300" alt="Contain">
    </div>

    <div class="container cover">
        <img src="https://via.placeholder.com/500x300" alt="Cover">
    </div>

    <div class="container none">
        <img src="https://via.placeholder.com/500x300" alt="None">
    </div>

    <div class="container scale-down">
        <img src="https://via.placeholder.com/500x300" alt="Scale Down">
    </div>

</body>
</html>

Explanation:

  1. Fill: The image stretches to fill the entire container. The aspect ratio is not preserved, so the image may appear distorted.
  2. Contain: The image is scaled to fit within the container while maintaining its aspect ratio. The entire image is visible, but there may be empty space in the container.
  3. Cover: The image is scaled to cover the entire container. The aspect ratio is maintained, but some parts of the image may be cropped if they extend beyond the container's dimensions.
  4. None: The image is displayed at its original size. If the image is larger than the container, it will overflow.
  5. Scale-Down: The image is scaled down to the smallest size that fits within the container, or it displays at its original size if it is smaller than the container.

Conclusion

The object-fit property is a useful tool in CSS for controlling how images and other replaced elements fit within their containers. It provides flexibility in how content is displayed, whether you want to ensure the entire image is visible, cover the container completely, or preserve the original size without scaling. Understanding and using object-fit effectively allows for more polished and responsive design solutions.

Recent job openings