{"id":194850,"date":"2015-02-02T04:01:46","date_gmt":"2015-02-02T11:01:46","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=194850"},"modified":"2020-07-01T12:54:02","modified_gmt":"2020-07-01T19:54:02","slug":"object-fit","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/o\/object-fit\/","title":{"rendered":"object-fit"},"content":{"rendered":"<p>The <code>object-fit<\/code> property defines how an element responds to the height and width of its content box. It&#8217;s intended for images, videos and other embeddable media formats in conjunction with the <code><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/o\/object-position\/\">object-position<\/a><\/code> property. Used by itself, <code>object-fit<\/code> lets us crop an inline image by giving us fine-grained control over how it squishes and stretches inside its box.<\/p>\n<p><code>object-fit<\/code> can be set with one of these five values:<\/p>\n<ul>\n<li><code>fill<\/code>: this is the default value which stretches the image to   fit the content box, regardless of its aspect-ratio.<\/li>\n<li><code>contain<\/code>: increases or decreases the size of the image to fill the box whilst preserving its aspect-ratio.<\/li>\n<li><code>cover<\/code>: 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.<\/li>\n<li><code>none<\/code>: image will ignore the height and width of the parent and retain its original size.<\/li>\n<li><code>scale-down<\/code>: the image will compare the difference between <code>none<\/code> and <code>contain<\/code> in order to find the smallest concrete object size.<\/li>\n<\/ul>\n<p>This is how we might set that property:<\/p>\n<pre rel=\"CSS\"><code class=\"language-css\">img {\n  height: 120px;\n}\n\n.cover {\n  width: 260px;\n  object-fit: cover;\n}<\/code><\/pre>\n<figure id=\"post-194982\" class=\"align-right media-194982\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2015\/02\/object-fit.png?ssl=1\" alt=\"object-fit example\" data-recalc-dims=\"1\"><\/figure>\n<p>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.<\/p>\n<p>It\u2019s worth noting that by default the image is centered within its content box but this can be altered with the <code><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/o\/object-position\/\">object-position<\/a><\/code> property.<\/p>\n<h3>Demo<\/h3>\n<p>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):<\/p>\n<p data-height=\"421\" style=\"height: 421px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;\" data-theme-id=\"1\" data-slug-hash=\"BywNVX\" data-default-tab=\"result\" data-user=\"robinrendle\" class=\"codepen\">See the Pen <a href=\"http:\/\/codepen.io\/robinrendle\/pen\/BywNVX\/\" rel=\"noopener\">object-fit<\/a> by Robin Rendle (<a href=\"http:\/\/codepen.io\/robinrendle\" rel=\"noopener\">@robinrendle<\/a>) on <a href=\"http:\/\/codepen.io\" rel=\"noopener\">CodePen<\/a>.<\/p>\n<p>If the content of the image does not fill the content box for whatever reason then the unfilled space will show the element&#8217;s background, in this instance a light grey background.<\/p>\n<h3>Related properties<\/h3>\n<ul>\n<li><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/o\/object-position\/\">object-position<\/a><\/li>\n<\/ul>\n<h3>Other resources<\/h3>\n<ul>\n<li><a href=\"http:\/\/dev.w3.org\/csswg\/css-images-3\/#the-object-fit\" rel=\"noopener\">object-fit on W3C<\/a><\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/object-fit\" rel=\"noopener\">object-fit on MDN<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/anselmh\/object-fit\" rel=\"noopener\">object-fit polyfill<\/a><\/li>\n<\/ul>\n<h3 id=\"browser-support\">Browser support<\/h3>\n<p>It&#8217;s worth noting that iOS 8-9.3 and Safari 7-9.1 the <code>object-fit<\/code> property but not <code>object-position<\/code>.<\/p>\n<div class=\"caniuse\"><div class=\"caniuse-header\"><p>This browser support data is from <a href=\"http:\/\/caniuse.com\/#feat=object-fit\" rel=\"noopener\">Caniuse<\/a>, which has more detail. A number indicates that browser supports the feature at that version and up.<\/p><\/div><div class=\"caniuse-section\"><h4>Desktop<\/h4><table class=\"browser-support-table\"><thead><tr><th class=\"chrome\"><span>Chrome<\/span><\/th><th class=\"firefox\"><span>Firefox<\/span><\/th><th class=\"ie\"><span>IE<\/span><\/th><th class=\"edge\"><span>Edge<\/span><\/th><th class=\"safari\"><span>Safari<\/span><\/th><\/tr><\/thead><tbody><tr><td class=\"y yep\" title=\"Chrome - \"><span class=\"caniuse-agents-version version\">32<\/span><\/td><td class=\"y yep\" title=\"Firefox - \"><span class=\"caniuse-agents-version version\">36<\/span><\/td><td class=\"n nope\" title=\"IE - \"><span class=\"caniuse-agents-version version\">No<\/span><\/td><td class=\"y yep\" title=\"Edge - \"><span class=\"caniuse-agents-version version\">79<\/span><\/td><td class=\"y yep\" title=\"Safari - \"><span class=\"caniuse-agents-version version\">10<\/span><\/td><\/tr><\/table><\/div><div class=\"caniuse-section\"><h4>Mobile \/ Tablet<\/h4><table class=\"browser-support-table\"><thead><tr><th class=\"and_chr\"><span>Android Chrome<\/span><\/th><th class=\"and_ff\"><span>Android Firefox<\/span><\/th><th class=\"android\"><span>Android<\/span><\/th><th class=\"ios_saf\"><span>iOS Safari<\/span><\/th><\/tr><\/thead><tbody><tr><td class=\"y yep\" title=\"Android Chrome - \"><span class=\"caniuse-agents-version version\">123<\/span><\/td><td class=\"y yep\" title=\"Android Firefox - \"><span class=\"caniuse-agents-version version\">124<\/span><\/td><td class=\"y yep\" title=\"Android - \"><span class=\"caniuse-agents-version version\">4.4.3-4.4.4<\/span><\/td><td class=\"y yep\" title=\"iOS Safari - \"><span class=\"caniuse-agents-version version\">10.0-10.2<\/span><\/td><\/tr><\/table><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>The object-fit property defines how an element responds to the height and width of its content box. It&#8217;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 [&hellip;]<\/p>\n","protected":false},"author":223806,"featured_media":0,"parent":13939,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"page-almanac-single.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":332875,"url":"https:\/\/css-tricks.com\/almanac\/properties\/a\/aspect-ratio\/","url_meta":{"origin":194850,"position":0},"title":"aspect-ratio","date":"January 20, 2021","format":false,"excerpt":"The CSS property aspect-ratio lets you create boxes that maintain proportional dimensions where the height and width of a box are calculated automatically as a ratio. It's a little math-y, but the idea is that you can divide one value by another on this property and the calculated value ensures\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/05\/Screen-Shot-2020-05-29-at-6.23.02-AM.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":18228,"url":"https:\/\/css-tricks.com\/lodge\/v10\/029-integrating-fitvids-js\/","url_meta":{"origin":194850,"position":1},"title":"#029: Integrating FitVids.js","date":"September 12, 2012","format":false,"excerpt":"Images aren't the only media that need to play nice within our flexible grid. And images were easy compared to video! When you set the width of an and override its height value to auto, the image will naturally retain its aspect ratio. This is also true of , but\u2026","rel":"","context":"With 10 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":323112,"url":"https:\/\/css-tricks.com\/almanac\/properties\/i\/inline-size\/","url_meta":{"origin":194850,"position":2},"title":"inline-size","date":"October 14, 2020","format":false,"excerpt":"inline-size is a logical property that defines the width of an element when the writing-mode is horizontal, or the height of the element when the writing-mode is vertical. .element { \u00a0 inline-size: 700px; \u00a0 writing-mode: vertical-lr; } As you might have guessed by the example above, the writing-mode property changes\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":321696,"url":"https:\/\/css-tricks.com\/almanac\/properties\/m\/mask-size\/","url_meta":{"origin":194850,"position":3},"title":"mask-size","date":"September 23, 2020","format":false,"excerpt":"In CSS, the mask-size property specifies the size of a mask layer image. In many ways, it works very much like the background-size property. .element { \u00a0 mask-image: url(star.svg); \u00a0 mask-size: 200px 100px; } Masking allows you to display selected parts of an element while hiding the rest. The size\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":350477,"url":"https:\/\/css-tricks.com\/almanac\/properties\/b\/block-size\/","url_meta":{"origin":194850,"position":4},"title":"block-size","date":"August 25, 2021","format":false,"excerpt":"block-size is a CSS logical property that defines the height of an element when the writing-mode is horizontal, or the width of the element when the writing-mode is vertical. .element { block-size: 700px; writing-mode: vertical-lr; } block-size is defined in the CSS Logical Properties and Values Level 1 specification which\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/css-tricks-logo-gradient-outline.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":149844,"url":"https:\/\/css-tricks.com\/lodge\/learn-jquery\/09-getters-setters\/","url_meta":{"origin":194850,"position":5},"title":"#09: Getters and Setters","date":"September 12, 2013","format":false,"excerpt":"The concept of getters and setters in JavaScript is just one of those things you should understand. They are nice in jQuery because the API is so consistent that once you get it, you can pretty much just guess how it is going to work for various methods. At the\u2026","rel":"","context":"With 3 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/194850"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/223806"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=194850"}],"version-history":[{"count":9,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/194850\/revisions"}],"predecessor-version":[{"id":306619,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/194850\/revisions\/306619"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13939"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=194850"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=194850"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}