Object Fit

import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { ResponsiveDesign } from "@/components/content.tsx"; import { Stripes } from "@/components/stripes.tsx";

export const title = "object-fit"; export const description = "Utilities for controlling how a replaced element's content should be resized.";

<ApiTable rows={[ ["object-contain", "object-fit: contain;"], ["object-cover", "object-fit: cover;"], ["object-fill", "object-fit: fill;"], ["object-none", "object-fit: none;"], ["object-scale-down", "object-fit: scale-down;"], ]} />

Examples

Resizing to cover

Use the object-cover utility to resize an element's content to cover its container:

} </Example>

<!-- [!code classes:object-cover] -->

Containing within

Use the object-contain utility to resize an element's content to stay contained within its container:

</div>

} </Example>

<!-- [!code classes:object-contain] -->

Stretching to fit

Use the object-fill utility to stretch an element's content to fit its container:

} </Example>

<!-- [!code classes:object-fill] -->

Scaling down

Use the object-scale-down utility to display an element's content at its original size but scale it down to fit its container if necessary:

</div>

} </Example>

<!-- [!code classes:object-scale-down] -->

Using the original size

Use the object-none utility to display an element's content at its original size ignoring the container size:

} </Example>

<!-- [!code classes:object-none] -->

Responsive design

<!-- [!code classes:md:object-cover] -->