{
"$type": "site.standard.document",
"content": {
"$type": "site.standard.content.markdown",
"text": "import InlineCalloutCluster from '../../components/InlineCalloutCluster.astro';\nimport InlineCallout from '../../components/InlineCallout.astro';\n\n<InlineCalloutCluster\n\ttagline=\"From Object-Fit to Zero CLS ยท 2-part series\"\n\tarticles={[\n\t\t{\n\t\t\ttitle: 'CSS Object-Fit Property',\n\t\t\tlink: '/css-object-fit',\n\t\t\tdescription: \"The property, the five values, and which one you'll actually use\",\n\t\t},\n\t\t{\n\t\t\ttitle: 'Mastering image ratios with object-fit',\n\t\t\tlink: '/mastering-image-ratios-object-fit',\n\t\t\tdescription: \"Aspect ratios, CLS prevention, and the full performance strategy\",\n\t\t}\n\t]}\n/>\n\n## Let's get into it\n\nBy using the object-fit property, we can define how an element responds to its parent containers height and width. This property is mainly used alongside images and videos, and can let us have further control over how it allows an inline image to be displayed.\n\n```css\n.object-fit-example {\n\tmax-inline-size: 800px;\n\tmax-block-size: 600px;\n\tborder: 1px solid var(--color-dark);\n}\n\n.object-fit-example picture {\n\tblock-size: 100%;\n\tinline-size: 100%;\n}\n\n.object-fit-example img {\n\tobject-position: center;\n\tobject-fit: cover;\n\twidth: 100%;\n\theight: 100%;\n}\n```\n\n<div class=\"object-fit-example\">\n\t<picture>\n\t\t<source media=\"(min-width: 750px)\" srcset=\"https://picsum.photos/800/600\" />\n\t\t<img src=\"https://picsum.photos/400/300\" alt=\"A placeholder image for use with our Object Fit blog post\" />\n\t</picture>\n</div>\n\nLooking at the example above, the inline image can be adjusted to the size of it's parent container - try resizing the window - it will always fit the box. There are a number of values that can be used to set `object-fit`.\n\n## What values can be used?\n\nThere are 5 values that can be used for this property; `fill`, `contain`, `cover`, `scale-down`and `none`.\n\n### Fill\n\nSimilar to background-size, the content is sized to completely fill the content box of the element, regardless of the height and width. If the aspect ratio of the content does not match the aspect ratio of the element, then it will stretch to fit. The image below is horrifically stretched to really show this style.\n\n<div class=\"object-fit-example\" style={{ \"--fit\": \"fill\" }}>\n\t<picture>\n\t\t<source media=\"(min-width: 750px)\" srcset=\"https://picsum.photos/200/550\" />\n\t\t<img src=\"https://picsum.photos/25/300\" alt=\"A placeholder image for use with our Object Fit blog post\" />\n\t</picture>\n</div>\n\n### Contain\n\nWhen using `contain`, the content scales to keep its aspect ratio while also fitting within the boundaries of the elements content box. Using this can make the object display gaps vertically or horizontally.\n\nThe entire object is made to fill the box, while preserving its aspect ratio, so the object will be \"letterboxed\" if its aspect ratio does not match the aspect ratio of the box.\n\n<div class=\"object-fit-example\" style={{ \"--fit\": \"contain\" }}>\n\t<picture>\n\t\t<source media=\"(min-width: 750px)\" srcset=\"https://picsum.photos/250/250\" />\n\t\t<img src=\"https://picsum.photos/100/300\" alt=\"A placeholder image for use with our Object Fit blog post\" />\n\t</picture>\n</div>\n\n### Cover\n\nThis is using `cover`, which is what we are using at the top of this post, however, it will not \"letterbox\" the object to keep it's aspect ratio. Instead it will continue to expand the content to fit the content box, often cropping the content as a result.\n\n<div class=\"object-fit-example\" style={{ \"--fit\": \"cover\" }}>\n\t<picture>\n\t\t<source media=\"(min-width: 750px)\" srcset=\"https://picsum.photos/250/250\" />\n\t\t<img src=\"https://picsum.photos/200/300\" alt=\"A placeholder image for use with our Object Fit blog post\" />\n\t</picture>\n</div>\n\n### Scale-Down\n\n`scale-down` chooses the smallest object size between the results of `none` and `contain` being used.\n\n### None\n\nFor `none`, the width and height of the content box is ignored by the object, which will maintain it's original size.\n\n## Practical Examples\n\n### Responsive Images with Picture Element\n\n`object-fit` works particularly well with the `<picture>` element for responsive images:\n\n```html\n<picture>\n <source srcset=\"large.jpg\" media=\"(min-width: 1200px)\" />\n <source srcset=\"medium.jpg\" media=\"(min-width: 768px)\" />\n <img src=\"small.jpg\" alt=\"Description\" class=\"responsive-image\" />\n</picture>\n\n<style>\n.responsive-image {\n width: 100%;\n height: 300px;\n object-fit: cover;\n object-position: center;\n}\n</style>\n```\n\n### Working with Different Aspect Ratios\n\nHere's how `object-fit` handles different aspect ratios:\n\n<p class=\"codepen\" data-height=\"614\" data-theme-id=\"dark\" data-slug-hash=\"bGrNKRX\" data-user=\"dominickjay217\" style=\"height: 614px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\"><span>See the Pen <a href=\"https://codepen.io/dominickjay217/pen/bGrNKRX\">\nObject-Fit Example #1</a> by Dom Jay (<a href=\"https://codepen.io/dominickjay217\">@dominickjay217</a>)\non <a href=\"https://codepen.io\">CodePen</a>.</span></p>\n\n## Performance Considerations\n\nWhen using `object-fit` with large images, consider these tips:\n\n1. Always specify both `width` and `height` attributes on your images to prevent layout shifts\n2. Use appropriate image formats and compression\n3. Consider using `loading=\"lazy\"` for images below the fold\n4. Use `srcset` and `sizes` attributes for responsive images\n\n## Support?\n\nSupport is excellent across all modern browsers. Since IE11 has been officially retired by Microsoft, you can safely use `object-fit` without any fallbacks.\n\nSo, what are you waiting for? Go try it out!\n\n<script async src=\"https://cpwebassets.codepen.io/assets/embed/ei.js\"></script>\n\n<InlineCallout\n\ttagline=\"Ready to go deeper?\"\n\ttitle=\"Mastering Image Ratios with Object-Fit\"\n\tdescription=\"This picks up where this post leaves off - aspect ratios, CLS prevention, and using object-fit as part of a real performance strategy.\"\n\tslug=\"/writing/mastering-image-ratios-object-fit\"\n/>",
"version": "1.0"
},
"description": "The five values, which one you'll actually use, and why cover is almost always the answer",
"path": "/writing/css-object-fit",
"publishedAt": "2021-10-20T00:00:00.000Z",
"site": "https://dominickjay.com",
"tags": [
"css"
],
"textContent": "import InlineCalloutCluster from '../../components/InlineCalloutCluster.astro';\nimport InlineCallout from '../../components/InlineCallout.astro';\n\nLet's get into it\n\nBy using the object-fit property, we can define how an element responds to its parent containers height and width. This property is mainly used alongside images and videos, and can let us have further control over how it allows an inline image to be displayed.\n\n\t\n\t\t\n\t\t\n\t\n\nLooking at the example above, the inline image can be adjusted to the size of it's parent container - try resizing the window - it will always fit the box. There are a number of values that can be used to set .\n\nWhat values can be used?\n\nThere are 5 values that can be used for this property; , , , and .\n\nFill\n\nSimilar to background-size, the content is sized to completely fill the content box of the element, regardless of the height and width. If the aspect ratio of the content does not match the aspect ratio of the element, then it will stretch to fit. The image below is horrifically stretched to really show this style.\n\n\t\n\t\t\n\t\t\n\t\n\nContain\n\nWhen using , the content scales to keep its aspect ratio while also fitting within the boundaries of the elements content box. Using this can make the object display gaps vertically or horizontally.\n\nThe entire object is made to fill the box, while preserving its aspect ratio, so the object will be \"letterboxed\" if its aspect ratio does not match the aspect ratio of the box.\n\n\t\n\t\t\n\t\t\n\t\n\nCover\n\nThis is using , which is what we are using at the top of this post, however, it will not \"letterbox\" the object to keep it's aspect ratio. Instead it will continue to expand the content to fit the content box, often cropping the content as a result.\n\n\t\n\t\t\n\t\t\n\t\n\nScale-Down\n\n chooses the smallest object size between the results of and being used.\n\nNone\n\nFor , the width and height of the content box is ignored by the object, which will maintain it's original size.\n\nPractical Examples\n\nResponsive Images with Picture Element\n\n works particularly well with the element for responsive images:\n\nWorking with Different Aspect Ratios\n\nHere's how handles different aspect ratios:\n\nSee the Pen \nObject-Fit Example #1 by Dom Jay (@dominickjay217)\non CodePen.\n\nPerformance Considerations\n\nWhen using with large images, consider these tips:\nAlways specify both and attributes on your images to prevent layout shifts\nUse appropriate image formats and compression\nConsider using for images below the fold\nUse and attributes for responsive images\n\nSupport?\n\nSupport is excellent across all modern browsers. Since IE11 has been officially retired by Microsoft, you can safely use without any fallbacks.\n\nSo, what are you waiting for? Go try it out!",
"title": "object-fit: A Starter Guide",
"updatedAt": "2026-06-08T09:40:18.798Z"
}