CSS | The object-fit Property

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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>

    chevron_right

    
    

    Output:

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

    Syntax:

    object-fit: contain;

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>

    chevron_right

    
    

    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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>

    chevron_right

    
    

    Output:

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

    Syntax:

    object-fit: none;

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>

    chevron_right

    
    

    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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>

    chevron_right

    
    

    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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>

    chevron_right

    
    

    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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>

    chevron_right

    
    

    Output:

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

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Opera
  • Safari


My Personal Notes arrow_drop_up


If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :
Practice Tags :


2


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.