{"componentChunkName":"component---src-templates-tailwindclass-js","path":"/tailwindcss/classes/tailwind-object-fit/","result":{"data":{"site":{"siteMetadata":{"title":"Resources to help developers | Contrast | Devwares","docsLocation":""}},"mdx":{"fields":{"id":"7825e881-2aae-5071-936e-0554be726e08","title":"Tailwind CSS Object Fit","slug":"/classes/tailwind-object-fit/"},"body":"var _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }\n/* @jsxRuntime classic */\n/* @jsx mdx */\n\nvar _frontmatter = {\n \"lastUpdated\": \"20 May 2024\",\n \"title\": \"Tailwind CSS Object Fit\",\n \"metaTitle\": \"Tailwind CSS Object Fit\",\n \"metaDescription\": \"The object-{fit} utility class in Tailwind CSS allows you to control how an image or video content fits within its container.\",\n \"canonicalUrl\": \"https://windframe.dev/tailwind/classes/tailwind-object-fit\"\n};\nvar layoutProps = {\n _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n var components = _ref.components,\n props = _objectWithoutProperties(_ref, _excluded);\n return mdx(MDXLayout, _extends({}, layoutProps, props, {\n components: components,\n mdxType: \"MDXLayout\"\n }), mdx(\"h1\", null, \"Tailwind Object Fit\"), mdx(\"p\", null, \"The object-{fit} utility class in Tailwind CSS allows you to control how an image or video content fits within its container. With Tailwind's object-{fit} class, you can easily adjust the scaling and positioning of media elements to achieve the desired visual effect.\"), mdx(\"h2\", null, \"Applying Object Fit\"), mdx(\"p\", null, \"To apply the object fit behavior to an element, you can use the object-{fit} utility class, where {fit} represents the desired fitting mode. The available fitting modes are:\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"object-contain: Scale the content proportionally to fit within the container while preserving its aspect ratio.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"object-cover: Scale the content proportionally to completely cover the container, potentially cropping parts of the content.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"object-fill: Stretch the content to fill the container, disregarding its aspect ratio and potentially distorting the content.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"object-none: Display the content at its original size, ignoring the container's dimensions and aspect ratio.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"object-scale-down: Scale the content down if it is larger than the container, maintaining its aspect ratio.\\nHere's an example:\")), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-html\"\n }, \"\\n\")), mdx(\"h2\", null, \"Preview\"), mdx(\"div\", {\n \"className\": \"rounded-xl relative overflow-auto bg-blue-100 p-10\"\n }, \" \\n\", mdx(\"div\", {\n parentName: \"div\",\n \"className\": \"text-center rounded-lg overflow-hidden w-56 sm:w-96 mx-auto\"\n }, \"\\n \", mdx(\"img\", {\n parentName: \"div\",\n \"className\": \"h-48 w-96 rounded-md overflow-hidden object-cover\",\n \"src\": \"https://images.unsplash.com/photo-1687789903431-54cdeb56bb43?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=256&h=256&q=80\"\n }), \"\\n \")), mdx(\"h2\", null, \"Responsive Object Fit\"), mdx(\"p\", null, \"Tailwind CSS allows you to apply object fit classes responsively at different breakpoints. To use responsive object fit classes, you can append the breakpoint prefix to the utility class. For example, \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"md:object-fill\"), \" sets the object fit behavior to object-fill starting from the medium breakpoint and above.\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-html\"\n }, \"\\n\")), mdx(\"p\", null, \"In the above example, the object fit behavior of the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"\"), \" element is set to object-contain by default, but starting from the medium breakpoint and above, it changes to object-fill.\"), mdx(\"h2\", null, \"Tailwind Object Fit Class Table\"), mdx(\"table\", null, mdx(\"thead\", {\n parentName: \"table\"\n }, mdx(\"tr\", {\n parentName: \"thead\"\n }, mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Class\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Properties\"))), mdx(\"tbody\", {\n parentName: \"table\"\n }, mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"object-contain\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"object-fit: contain;\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"object-cover\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"object-fit: cover;\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"object-fill\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"object-fit: fill;\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"object-none\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"object-fit: none;\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"object-scale-down\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"object-fit: scale-down;\")))), mdx(\"h2\", null, \"Windframe Tailwind blocks\"), mdx(\"p\", null, mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://app.windframe.dev/editor?id=pricing2\"\n }, \"Pricing\")));\n}\n;\nMDXContent.isMDXComponent = true;","tableOfContents":{"items":[{"url":"#tailwind-object-fit","title":"Tailwind Object Fit","items":[{"url":"#applying-object-fit","title":"Applying Object Fit"},{"url":"#preview","title":"Preview"},{"url":"#responsive-object-fit","title":"Responsive Object Fit"},{"url":"#tailwind-object-fit-class-table","title":"Tailwind Object Fit Class Table"},{"url":"#windframe-tailwind-blocks","title":"Windframe Tailwind blocks"}]}]},"parent":{"__typename":"File","relativePath":"classes/tailwind-object-fit.md"},"frontmatter":{"githubUrl":null,"metaTitle":"Tailwind CSS Object Fit","lastUpdated":"20 May 2024","metaDescription":"The object-{fit} utility class in Tailwind CSS allows you to control how an image or video content fits within its container."}}},"pageContext":{"id":"7825e881-2aae-5071-936e-0554be726e08"}},"staticQueryHashes":["2619113677","2619113677","2619113677","2619113677","2619113677","2619113677","2619113677","2619113677","3309287076","3309287076","3706406642","3706406642","3706406642","4045616534","4045616534","956403285"]}