[ @sdxc/u/size ]

object-fit

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

View as Markdown Open in GitHub Open in ChatGPT Open in Claude

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

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:

<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:

<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:

<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:

fit("none")

fit("scale-down")

<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.

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

Responsive design

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

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

Signature

u.fit(value?: FitValue)