Object-fit utility

Quick implementation

.fit-cover   { object-fit: cover; }
.fit-contain { object-fit: contain; }
.fit-fill    { object-fit: fill; }
.fit-none    { object-fit: none; }

.fit-center  { object-position: center; }

Prompt this to your LLM

Includes role, constraints, two framework variants, and edge cases to handle.

You are a senior frontend engineer building a design system utility layer.

Goal: A set of object-fit utility classes that control how <img> and
<video> elements fill their containers — cover, contain, fill, and none —
plus an object-position helper. No JavaScript required.

Technical constraints:
- Provide four classes: .fit-cover, .fit-contain, .fit-fill, .fit-none,
  each setting the corresponding object-fit value.
- Add .fit-center for object-position: center to complement any fit mode.
- Use oklch() for any color values — no hex or rgba.
- Use CSS custom properties (var(--radius), etc.) for theming where relevant.
- Pair each utility with an aspect-ratio container so the image has a
  defined box to fill — e.g. aspect-ratio: 16 / 9 on the wrapper.
- The <img> or <video> inside the container must have width: 100% and
  height: 100% so object-fit has something to work against.

Framework variant (pick one):
A) Vanilla CSS utility classes applied directly to <img> elements.
B) React component — accept a fit prop ("cover"|"contain"|"fill"|"none"),
   a position prop (default "center"), and an aspectRatio prop (default "16/9");
   render a wrapper div + img with appropriate styles applied.

Edge cases to handle:
- object-fit only applies to replaced elements (<img>, <video>, <iframe>,
  <canvas>). Applying it to a <div> has no effect — document this clearly.
- Without a fixed height or aspect-ratio on the container, the image will
  collapse to 0 height; always set dimensions on the wrapper, not the image.
- object-fit: none renders the image at its intrinsic size; clip with
  overflow: hidden on the container to avoid content spilling out.
- For art-direction (different crops at different breakpoints), use
  object-position with responsive values rather than swapping images.

Return CSS only (or a React component if variant B is chosen).

When to use each value

object-fit: cover is the workhorse. It scales the image up or down until it fills the container entirely, cropping the overflow. The image's aspect ratio is preserved — nothing gets squashed. Use it for hero images, card thumbnails, avatars, and anywhere consistent framing matters more than showing the full image.

object-fit: contain is the opposite trade-off: the entire image is always visible, letterboxed with empty space on the sides or top/bottom if the aspect ratios don't match. Use it for product photos where the full subject must be shown, logos against unknown backgrounds, or technical diagrams that can't be cropped.

object-fit: fill is the browser default. The image is stretched to exactly match the container's dimensions, ignoring its own aspect ratio. This almost always looks wrong for photos. Its only legitimate use case is when the image is intentionally designed to fill at any ratio, like a texture or pattern.

object-fit: none renders the image at its natural (intrinsic) size, anchored by object-position. The container clips whatever doesn't fit. This is useful for pixel-art sprites, icons with precise sizing, or when you want exact-pixel control rather than scaled fitting.

How it interacts with aspect-ratio

The container holding the image must have defined dimensions for object-fit to do anything useful. The cleanest modern approach is aspect-ratio on the wrapper combined with a fixed or percentage width — the height derives automatically. The image inside gets width: 100%; height: 100%, creating a box for object-fit to work against.

Without those dimensions, the image will either collapse to zero height (if the container has no explicit height) or behave unexpectedly. This is the most common source of confusion with object-fit: the property is applied to the image element but it only works if the container constrains the space.

The overflow: hidden on the container is important for cover and none — it clips the parts of the image that extend beyond the container bounds. Without it, the cropped portions remain visible and overflow the layout.

The object-position companion

When using cover or none, the browser decides which part of the image to show inside the container. By default, it centers the image — equivalent to object-position: center. You can override this with any CSS position value: object-position: top, object-position: 25% 75%, or even object-position: 100px 50px.

This is powerful for art direction. A portrait photo cropped to a landscape thumbnail might need to show the face rather than the torso — object-position: top center handles that without JavaScript or server-side cropping. Combined with responsive breakpoints, you can shift the focal point at different screen sizes to suit the layout.

The .fit-center utility in this snippet sets object-position: center explicitly, which is redundant with the default but useful in a utility-first system where the default might have been overridden by a more specific rule.