CSS object-position: move a thumbnail crop without changing the evidence

When to use it

A case index displays a landscape photo with the relevant equipment near the right edge. The default centered crop may cut that equipment away in a square thumbnail, so move the cover crop toward the right. The detail page still needs the full image when the entire scene matters as evidence. Test portrait and landscape sources, localized cards with different dimensions, high-density screens, and zoom. A fixed 70 percent horizontal position should be verified against every image in that content class; per-image focal metadata may be needed if subjects move around. If the image is only decoration, a background may be appropriate, but meaningful evidence belongs in HTML with alternate text. Do not use the thumbnail crop as a privacy redaction: the original bytes remain available. Dimensions in HTML should reserve layout space where possible.

.case-photo__thumb { inline-size: 100%; aspect-ratio: 1; object-fit: cover; object-position: 70% center; }
.case-photo__detail { max-inline-size: 100%; block-size: auto; object-fit: contain; }

Cost and verification

The crop operation does not shrink the downloaded file. Generate an appropriately sized thumbnail or responsive image source for a busy index, then keep the full-resolution evidence where it is needed. Rendering many oversized originals as tiny covers wastes bandwidth and decode memory. Check actual focal positions after responsive layout changes; a square crop at one width may be a taller rectangle elsewhere. The rule is a presentational choice, so it must not remove information required to understand or audit the case. A failed image still needs a meaningful text alternative, and the card layout should survive without the bitmap.

Common Mistakes

• Do not treat object-position as image editing or redaction.
• Do not assume one focal percentage fits every source image.
• Do not use a CSS crop to avoid serving a smaller thumbnail file.

Connected lessons

• CSS Property Decisions
• CSS object-fit and aspect ratio: crop a preview without distorting it
• CSS background size and position: crop decoration deliberately
• HTML srcset and sizes: let the browser choose an appropriately sized image