CSS Object-fit Property

    In this advance CSS tutorial, we will be going to learn the CSS object-fit property. We will also learn how to use this property to resize an image and video to fit in its parent container.

    CSS object-fit Property

    The object-fit property can be used on the <img> and <video> elements so they could fit in the parent element container. This property can either maintain the height-width ratio or stretch and shrink the element to fit it in the container. For instance, if an image is of 500X300 pixels and the container width and height ratio is 200X400, we can use the image height and width properties to set the image height and width according to the container area. But this could lead to image distortion. What if we only want to display that portion of the image that fits in the container box and cut off the rest of the sides. For that, we can use the object-fit:cover along with the width and height property. This will preserve the original image pixels.

    Example

    <!DOCTYPE html>
    <html>
        <head>
            <style>
                img {
                  width: 200px;
                  height: 200px;
                  object-fit: cover;
                }
            </style>
        </head>
    <body>
      <img src="img.png" alt="image" >
    </body>
    </html>
    

    CSS object-fit Property values

    The object-fit property can accept one of these values.

    Values Description
    fill It is the default value of object-fit property. The image or video element will cover the full size of the container box by shrinking or stretching the pixels.
    contain The element content is scaled, and it maintains the aspect ratio of the default element content.
    cover It fit the container's element and maintains the actual aspect ratio of the element by cutting the unnecessary sides.
    none It does not resize the replaced content.
    scale-down The element content is sized between none and contain.

    Example

    <!DOCTYPE html>
    <html>
        <head>
            <style>
                #fill {
                    width: 300px;
                    height: 300px;
                    object-fit: fill;
                }
    
                #contain {
                    width: 300px;
                    height: 300px;
                    object-fit: contain;
                }
    
                #cover {
                    width: 300px;
                    height: 300px;
                    object-fit: cover;
                }
    
                #scale-down {
                    width: 300px;
                    height: 300px;
                    object-fit: scale-down;
                }
    
                #none {
                    width: 300px;
                    height: 300px;
                    object-fit: none;
                }
            </style>
    
        </head>
        <body>
    
            <h2>object-fit: fill </h2>
            <img id="fill" src="a.jpg">
    
            <h2>object-fit: contain</h2>
            <img id="contain" src="a.jpg">
    
            <h2>object-fit: cover</h2>
            <img id="cover" src="a.jpg" >
    
            <h2>object-fit: scale-down</h2>
            <img id="scale-down" src="a.jpg" >
    
            <h2>object-fit: none</h2>
            <img id="none" src="a.jpg">
    
        </body>
    </html>

    Summary

    • The object-fit property defines how an image and video should be resized to fit in a container.
    • To fit an image in a container, we could either shrink and stretch the image or cut the sides.
    • By shrinking and stretching, the image quality decrease, and the aspect ratio distorts.
    • But by cutting the image sides or presenting the default image keeps the image aspect ratio maintain.

    People are also reading: