# object-fit

> Applies `object-fit`, shaping how a container-sized media element (`img`, `video`) fills its box.

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

Applies `object-fit`, shaping how a container-sized media element
(`img`, `video`) fills its box.

## Quick reference

Every documented call, beside the CSS it emits.

| Call | CSS |
| --- | --- |
| `u.fit("cover")` | `css({ objectFit: "cover" })` |

## Examples

### Basic example

Use `fit("cover")`, or `fit()` with no argument, to resize an image to cover its box, cropping whatever overflows:

```tsx
<img src={...} alt="" mix={[fit("cover"), is(48), bs(48), ...]} />
```

### Containing an image

Use `fit("contain")` to resize an image to fit inside its box, keeping its whole frame visible:

```tsx
<img src={...} alt="" mix={[fit("contain"), is(48), bs(48), ...]} />
```

### Stretching to fit

Use `fit("fill")` to stretch an image to its box, ignoring its aspect ratio:

```tsx
<img src={...} alt="" mix={[fit("fill"), is(48), bs(48), ...]} />
```

### Original size

Use `fit("none")` to keep an image at its own size, or `fit("scale-down")` to shrink it to fit only when it is larger than its box:

```tsx
<div mix={[...]}>
	<div mix={[vstack({ gap: 2, align: "center" })]}>
		<img src={...} alt="" mix={[fit("none"), is(40), bs(40), ...]} />
		<span mix={[...]}>fit("none")</span>
	</div>
	<div mix={[vstack({ gap: 2, align: "center" })]}>
		<img src={...} alt="" mix={[fit("scale-down"), is(40), bs(40), ...]} />
		<span mix={[...]}>fit("scale-down")</span>
	</div>
</div>
```

## Applying on a state

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

```ts
u.hover(u.fit("cover"))
```

## Responsive design

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

```ts
u.at("md", u.fit("cover"))
```

## Signature

```ts
u.fit(value?: FitValue)
```