object-fit

The object-fit property defines how an element responds to the height and width of its content box. It's intended for images, videos and other embeddable media formats in conjunction with the object-position property. Used by itself, object-fit lets us crop an inline image by giving us fine-grained control over how it squishes and stretches inside its box.

object-fit can be set with one of these five values:

  • fill: this is the default value which stretches the image to fit the content box, regardless of its aspect-ratio.
  • contain: increases or decreases the size of the image to fill the box whilst preserving its aspect-ratio.
  • cover: the image will fill the height and width of its box, once again maintaining its aspect ratio but often cropping the image in the process.
  • none: image will ignore the height and width of the parent and retain its original size.
  • scale-down: the image will compare the difference between none and contain in order to find the smallest concrete object size.

This is how we might set that property:

img {
  height: 120px;
}

.cover {
  width: 260px;
  object-fit: cover;
}
object-fit example

Because the second image has an aspect ratio that is different than the original image on the left it will stretch outside the realm of its content box, cropping the top and bottom parts of the image.

It’s worth noting that by default the image is centered within its content box but this can be altered with the object-position property.

Demo

The demo below shows five examples detailing how we might want an image to squish into a content box which is sometimes smaller or larger than its original width (resize the browser for a better idea of how this might work):

See the Pen object-fit by Robin Rendle (@robinrendle) on CodePen.

If the content of the image does not fill the content box for whatever reason then the unfilled space will show the element's background, in this instance a light grey background.

Related properties

Other resources

Browser support

It's worth noting that iOS 8-9.3 and Safari 7-9.1 the object-fit property but not object-position.

This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.

Desktop

ChromeOperaFirefoxIEEdgeSafari
3110.6*36No1710

Mobile / Tablet

iOS SafariOpera MobileOpera MiniAndroidAndroid ChromeAndroid Firefox
10.0-10.211*all*4.4.3-4.4.46257

Comments

  1. User Avatar
    Loque
    Permalink to comment#

    The polyfill is a lie! Portal references aside, at the time of writing the polyfill does not currently work in IE which is a real shame for me as I will have to write some JS to continue using this beautiful css prop.

  2. User Avatar
    Bernhard
    Permalink to comment#

    Just in case someone needs a IE9, IE10, Edge hack solution, I have a workaround, that produces not actually a cropping, but a IMHO acceptable fallback for IE9+:



    // IE9 HACK
    :root figure {
    height:200px;
    overflow:hidden;
    }

          // IE10+ HACK
          _:-ms-lang(x), figure {
               height:200px;
               overflow:hidden;
          }
          figure {
               img {
                    width:33%;
                    height:200px;
                    object-fit:contain;
                    object-position:0 0;
    
               }
               // IE9 HACK
               :root img {
                    height:auto;
                    width:auto;
               }  
    
               // IE10+ HACK
               _:-ms-lang(x), img {
                    height:auto;
                    width:auto;
               } 
          }
    

  3. User Avatar
    John Darling
    Permalink to comment#

    Maybe I’m missing something…I don’t see the benefit of this property? Fluid images will fill a parent container and retain their aspect ratio. They can be aligned horizontally with the “text-align” property and vertically with “vertical-align”. The only exception would be if, one wanted the image to be cropped by its parent (object-fit: cover).

    • User Avatar
      Andrew Douglass
      Permalink to comment#

      The reason I’m looking to use it is exactly what you said. I’m replacing some stuff that used css background images with responsive images, and I need to use object-fit:cover on them. Maybe someone will propose srcset for background images in the css spec instead though. =)

    • User Avatar
      Alex
      Permalink to comment#

      Consider a blog post featured image. If you use background-image as the only way the image is displayed due to design constraints, that image will not display as metadata when the article is shared on Social Media, or in google searches.

      You can get the layout benefits of background-image with images without sacrificing the data that you need outside of your side to display your post properly.

  4. User Avatar
    Phuong
    Permalink to comment#

    Thank you for trick

    • User Avatar
      kathir
      Permalink to comment#

      object fit css not working ie browser.any alternative solution please give soon.

  5. User Avatar
    Joey
    Permalink to comment#

    There’s an IE hack three comments up that looks legit. I still haven’t hopped on the “IE’s okay, now!” train, so I don’t know if it really IS legit, but it does seem worth giving a shot.

  6. User Avatar
    Rachel Bratt Tannenbaum
    Permalink to comment#

    Great post :) I Love object fit! It made my life easy when styling a website to fit into the design I got. Native LG & Samsung browsers doesn’t support object-fit as well. The polyfill workes great for them.

  7. User Avatar
    Constance
    Permalink to comment#

    I’m really digging using object-fit instead of inlining background-images, so I spent an hour or two coming up with a working jQuery polyfill for IE Edge and other non-supporting browsers. Feel free to check it out (and contribute if you see any issues!)

    https://github.com/constancecchen/object-fit-polyfill

    Alternatively, you can also check out Primož Cigler’s solution, which sets the image as a background-image on the parent container. https://medium.com/@primozcigler/neat-trick-for-css-object-fit-fallback-on-edge-and-other-browsers-afbc53bbb2c3#.sqaa2ssg4

  8. User Avatar
    Jen
    Permalink to comment#

    Thank you so much for this (object-fit: contain). Worked like a dream controlling my featured image sizes in cpts.

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag