{"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/"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://css-tricks.com/"https:////i0.wp.com//css-tricks.com//wp-content//uploads//2015//02//object-fit.png?ssl=1\%22 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/"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=https://css-tricks.com/"http:////codepen.io//robinrendle//pen//BywNVX///" rel=\"noopener\">object-fit<\/a> by Robin Rendle (<a href=https://css-tricks.com/"http:////codepen.io//robinrendle/" rel=\"noopener\">@robinrendle<\/a>) on <a href=https://css-tricks.com/"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/"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=https://css-tricks.com/"http:////dev.w3.org//csswg//css-images-3//#the-object-fit\" rel=\"noopener\">object-fit on W3C<\/a><\/li>\n<li><a href=https://css-tricks.com/"https:////developer.mozilla.org//en-US//docs//Web//CSS//object-fit/" rel=\"noopener\">object-fit on MDN<\/a><\/li>\n<li><a href=https://css-tricks.com/"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=https://css-tricks.com/"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\">126<\/span><\/td><td class=\"y yep\" title=\"Android Firefox - \"><span class=\"caniuse-agents-version version\">127<\/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 [&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":{"_acf_changed":false,"_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":"","_share_on_mastodon":"0","_share_on_mastodon_status":"%title% %permalink%"},"tags":[],"acf":[],"share_on_mastodon":{"url":"","error":""},"jetpack_sharing_enabled":true,"jetpack-related-posts":[],"_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}]}}