# object-position

> Applies `object-position`, choosing which part of a replaced element's cropped content stays visible, keeping a subject's face in frame once `u.fit("cover")` crops it.

```ts
import { objectPosition } from "@sdxc/u/size";
```

Applies `object-position`, choosing which part of a replaced element's
cropped content stays visible, keeping a subject's face in frame once
`u.fit("cover")` crops it. Only works with `u.fit()` on replaced elements.

## Quick reference

Every documented call, beside the CSS it emits.

| Call | CSS |
| --- | --- |
| `u.objectPosition()` | `css({ objectPosition: "center" })` |
| `u.objectPosition("top")` | `css({ objectPosition: "top" })` |
| `u.objectPosition("50% 20%")` | `css({ objectPosition: "50% 20%" })` |

## Examples

### Basic example

Use `objectPosition()` with `fit("cover")` to choose which part of a cropped image stays visible, like `"left"`, `"center"` or `"right"`:

```tsx
<div mix={[...]}>
	<div mix={[vstack({ gap: 2, align: "center" })]}>
		<img
			src={...}
			alt=""
			mix={[fit("cover"), objectPosition("left"), is(32), bs(32), ...]}
		/>
		<span mix={[...]}>left</span>
	</div>
	<div mix={[vstack({ gap: 2, align: "center" })]}>
		<img
			src={...}
			alt=""
			mix={[fit("cover"), objectPosition("center"), is(32), bs(32), ...]}
		/>
		<span mix={[...]}>center</span>
	</div>
	<div mix={[vstack({ gap: 2, align: "center" })]}>
		<img
			src={...}
			alt=""
			mix={[fit("cover"), objectPosition("right"), is(32), bs(32), ...]}
		/>
		<span mix={[...]}>right</span>
	</div>
</div>
```

### Corners and percentages

With `fit("none")` both axes crop, so a corner like `"top right"` or a percentage pair like `"15% 70%"` picks the part of the image in view:

```tsx
<div mix={[...]}>
	<div mix={[vstack({ gap: 2, align: "center" })]}>
		<img
			src={...}
			alt=""
			mix={[fit("none"), objectPosition("top right"), is(40), bs(40), ...]}
		/>
		<span mix={[...]}>top right</span>
	</div>
	<div mix={[vstack({ gap: 2, align: "center" })]}>
		<img
			src={...}
			alt=""
			mix={[fit("none"), objectPosition("bottom left"), is(40), bs(40), ...]}
		/>
		<span mix={[...]}>bottom left</span>
	</div>
	<div mix={[vstack({ gap: 2, align: "center" })]}>
		<img
			src={...}
			alt=""
			mix={[fit("none"), objectPosition("15% 70%"), is(40), bs(40), ...]}
		/>
		<span mix={[...]}>15% 70%</span>
	</div>
</div>
```

## Applying on a state

Wrap the call in a state utility to scope it to one selector.

```ts
u.hover(u.objectPosition())
```

## Responsive design

Wrap the call in a container query to scope it to one width.

```ts
u.at("md", u.objectPosition())
```

## Signature

```ts
u.objectPosition(value?: ObjectPositionValue)
```