Skip to content
Related Articles

Related Articles

CSS | The object-fit Property
  • Difficulty Level : Expert
  • Last Updated : 03 Mar, 2021

It is a CSS property to specify how an image or video should be resized to fit its content box.

Syntax:

object-fit: fill|contain|cover|scale-down|none|initial|inherit;

Property values:

  • fill: It is a default value. The replaced image is stretched to fit the content box. The replaced image will completely fill the box heedless of its aspect ratio.

    Syntax:



    object-fit: fill;

    Example:




    <!DOCTYPE html>
    <html>
      
    <head>
        <title>
            CSS | The object-fit Property
        </title>
        <style>
            img {
                width: 200px;
                height: 400px;
                object-fit: Fill;
            }
        </style>
    </head>
      
    <body>
      
        <img src=
             lt="GeeksforGeeks" width="667" height="184">
    </body>
      
    </html>

    Output:

  • contain:The replaced image preserves the aspect ratio of the original image while fitting within the content box.

    Syntax:

    object-fit: contain;

    Example:




    <!DOCTYPE html>
    <html>
      
    <head>
        <title>
            CSS | The object-fit Property
        </title>
        <style>
            img {
                width: 200px;
                height: 400px;
                object-fit: contain;
            }
        </style>
    </head>
      
    <body>
      
        <img src=
             alt="GeeksforGeeks" width="667" height="184">
      
    </body>
      
    </html>

    Output:

  • cover:This value also preserves the aspect ratio of the original image is the replaced image while fitting in the content box. Sometimes it is clipped to fit when the aspect ratio of the original image doesn’t match with the aspect ratio of the content box.

    Syntax:



    object-fit: cover;

    Example:




    <!DOCTYPE html>
    <html>
      
    <head>
        <title>
            CSS | The object-fit Property
        </title>
        <style>
            img {
                width: 200px;
                height: 400px;
                object-fit: cover;
            }
        </style>
    </head>
      
    <body>
      
        <img src=
             alt="GeeksforGeeks" width="667" height="184">
    </body>
      
    </html>

    Output:

  • none:The replaced image will ignore aspect ratio of original image. Hence, it is not resized.

    Syntax:

    object-fit: none;

    Example:




    <!DOCTYPE html>
    <html>
      
    <head>
        <title>
            CSS | The object-fit Property
        </title>
        <style>
            img {
                width: 200px;
                height: 400px;
                object-fit: none;
            }
        </style>
    </head>
      
    <body>
      
        <img src=
             alt="GeeksforGeeks" width="667" height="184">
    </body>
      
    </html>

    Output:

  • scale-down:The replaced image is resized as if none or contain were specified and results to the smallest object size.

    Syntax:

    object-fit: scale-down;

    Example:




    <!DOCTYPE html>
    <html>
      
    <head>
        <title>
            CSS | The object-fit Property
        </title>
        <style>
            img {
                width: 200px;
                height: 200px;
                object-fit: scale-down;
            }
        </style>
    </head>
      
    <body>
      
        <img src=
             alt="GeeksforGeeks" width="667" height="184">
    </body>
      
    </html>

    Output:

  • initial: initial sets the default value i.e. replaced image is stretched to fit the content box as the default value is fill.

    Syntax:

    object-fit: initial;

    Example:




    <!DOCTYPE html>
    <html>
      
    <head>
        <title>
            CSS | The object-fit Property
        </title>
        <style>
            img {
                width: 200px;
                height: 400px;
                object-fit: initial;
            }
        </style>
    </head>
      
    <body>
      
        <img src=
             alt="GeeksforGeeks" width="667" height="184">
    </body>
      
    </html>

    Output:

  • inherit: inherit receives the property from the parent element. When it is used with root element then initial property will be used.

    Syntax:

    object-fit: inherit;

    Example:




    <!DOCTYPE html>
    <html>
      
    <head>
        <title>
            CSS | The object-fit Property
        </title>
        <style>
            .object {
                object-fit: none;
            }
              
            img {
                width: 200px;
                height: 400px;
                object-fit: inherit;
            }
        </style>
    </head>
      
    <body>
        <div class="object">
            <img src=
                 alt="GeeksforGeeks" width="667" height="184">
        </div>
        <!--Here img inherits property from parent i.e none from class object-->
    </body>
      
    </html>

    Output:

Supported Browsers: The browsers supported by object-fit Property are listed below:

  • Google Chrome
  • Firefox
  • Opera
  • Safari
My Personal Notes arrow_drop_up
Recommended Articles
Page :