Overflow: hidden crop

Quick implementation

/* Crop to aspect ratio */
.crop-box {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.crop-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Circle crop */
.avatar-crop {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  overflow: hidden;
}

.avatar-crop img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top; /* favor face */
}

Prompt this to your LLM

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

You are a senior frontend engineer building responsive image layouts.

Goal: Use overflow: hidden on containers to crop images to specific
shapes and aspect ratios without distortion, using object-fit: cover.

Technical constraints:
- Set overflow: hidden on the container to define the crop boundary.
- Use aspect-ratio on the container for responsive aspect-ratio crops
  (preferred over padding-top percentage hacks).
- Set width: 100%; height: 100%; object-fit: cover on the img to fill
  the container and crop gracefully.
- Use object-position to control which part of the image stays in frame.
- Use border-radius: 50% on the container for circle crops.
- Use oklch() for any color values — no hex or rgba.

Framework variant (pick one):
A) Vanilla CSS utility classes — .crop-box for aspect-ratio crops,
   .avatar-crop for circle crops, applied to any container with an img.
B) React component — ImageCrop component accepting src, alt, ratio
   (e.g. "16/9"), shape ("rect" | "circle"), and position props;
   renders the container and img with correct CSS applied inline.

Edge cases to handle:
- Images taller than wide (portrait) may need object-position: center top
  to keep faces visible rather than defaulting to center.
- overflow: hidden creates a new stacking context in some browsers —
  position: relative on the container restores predictable z-index
  behavior for any absolutely positioned children inside it.
- For animated transitions (zoom on hover), apply the transform to the
  img, not the container — this avoids triggering layout reflow.
- Lazy-loaded images: set a background color on the container to show a
  placeholder while the image loads.

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

Why overflow: hidden is the foundation of image cropping

overflow: hidden is the Swiss Army knife of CSS cropping. Combined with object-fit: cover, it enables responsive image crops that fill any container shape — cards, avatars, banners — without distortion. Unlike CSS clip-path (which clips without affecting layout), overflow: hidden is part of the box model and participates in stacking context, making it broadly compatible with all the surrounding CSS you're likely to have.

The container defines the visible area. Everything outside its bounds is clipped. The child image uses object-fit: cover to fill the container entirely — possibly cropping the image edges — and object-position controls which part of the image stays in frame. This two-property combination (overflow: hidden on the container, object-fit: cover on the image) is the standard, well-supported approach used in virtually every design system.

Controlling the crop with object-position

When object-fit: cover crops an image, it centers the crop by default. For editorial photos this is reasonable, but portrait photos with faces often benefit from object-position: center top — this keeps the top of the image (where faces typically are) in frame rather than centering on the torso.

You can use any CSS position value: keywords (top, bottom, left, right, center) or percentages and lengths (50% 20% to position 20% from the top). For user-uploaded content where the focal point is unknown, a "face-aware" crop usually means defaulting to center top. For landscape photography, center center or 50% 40% (slightly above center, where horizons sit) often looks better.

Pairing border-radius with overflow: hidden creates any shape crop. border-radius: 50% gives a circle on a square container, and arbitrary border-radius values on a rectangular container produce rounded-rectangle crops — useful for modern card designs.

Accessibility and stacking context notes

Cropped images still need alt text describing the full image, not just the cropped portion. If a portrait photo is cropped to show only a face, the alt should still describe the person, not just the visible crop. For purely decorative images, use alt="".

overflow: hidden creates a new stacking context in some situations — specifically when combined with position values other than static. Be aware this can affect z-index of absolutely positioned children inside the cropped container. Adding position: relative explicitly to the container makes stacking behavior predictable and is a good default when nesting positioned elements inside a cropped box.