Technology that earns its place.

Front-End Practice

Use Object-Fit Without Cropping the Important Part of an Image

Editors at Selsela Tech Notes ·
Web designer comparing two crops of the same landscape photograph on a laptop.
AI-generated photographic illustration; not documentary photography.

The image fits the card perfectly, but the person’s face has disappeared above the frame. Filling a rectangle and preserving the important part of a photograph are two separate design decisions.

As MDN explains, object-fit controls how an image’s content fits its element box. Cover preserves proportions while filling the box, which can crop content. Contain preserves the whole image within the box, which can leave unused space.

Decide what must remain visible

For an editorial landscape, cropping some sky may be harmless. For a product photograph showing the complete item, cutting off a handle can remove information a customer needs. A chart or screenshot may need the full frame rather than a decorative crop.

Make that decision per image type. A single site-wide rule can be convenient while producing the wrong result for diagrams, portraits and product details.

.story-image {
  width: 100%;
  height: 240px;
  object-fit: cover;
  object-position: 50% 35%;
}

This is an illustrative CSS example, not a universal focal-point setting. The second percentage shifts the alignment within the box. Test it with the actual image; it does not recover content that is absent from the file.

MDN’s separate object-position reference describes the alignment behaviour. Keeping the two properties conceptually separate makes troubleshooting easier: first choose how the image fits, then where the fitted content sits.

Check more than the widest screen

Preview the same image in the narrowest and widest card layouts. A focal point that works in a broad desktop crop may still lose a face in a tall mobile frame. Consider a different aspect ratio or an alternate image when alignment alone cannot preserve the intended information.

Keep the file dimensions and responsive source selection appropriate to the display. CSS cropping does not make an oversized download smaller. Alt text should explain the image’s purpose, but it should not be used to excuse a visual crop that hides essential content from sighted readers.

Finish by checking the card in context: title, image and caption should describe the same subject. A technically valid crop is useful only if the reader can still see why that image belongs there.

Topics: / /