Object position

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

export const title = "object-position"; export const description = "Utilities for controlling how a replaced element's content should be positioned within its container.";

)", "object-position: var(\);"], ["object-[\]", "object-position: \;"], ]} />

Examples

Basic example

Use utilities like object-left and object-bottom-right to specify how a replaced element's content should be positioned within its container:

{

object-top-left

object-top

object-top-right

object-left

object-center

object-right

object-bottom-left

object-bottom

object-bottom-right

}

<!-- [!code classes:object-top-left,object-top-right,object-center,object-bottom-left,object-bottom-right,object-bottom,object-left,object-right,object-top] -->
<img class="size-24 object-top-left ..." src="/img/mountains.jpg" />
<img class="size-24 object-top ..." src="/img/mountains.jpg" />
<img class="size-24 object-top-right ..." src="/img/mountains.jpg" />
<img class="size-24 object-left ..." src="/img/mountains.jpg" />
<img class="size-24 object-center ..." src="/img/mountains.jpg" />
<img class="size-24 object-right ..." src="/img/mountains.jpg" />
<img class="size-24 object-bottom-left ..." src="/img/mountains.jpg" />
<img class="size-24 object-bottom ..." src="/img/mountains.jpg" />
<img class="size-24 object-bottom-right ..." src="/img/mountains.jpg" />

Using a custom value

Responsive design