Five ways to crop images in HTML and CSS

A crop can be a view or a new file

A browser crop usually creates a viewing window. The source image is decoded, laid out, and painted, but part of it is concealed by a box, mask, or clipping boundary. The hidden pixels still belong to the resource. This is useful when one image needs several temporary presentations, such as a square card, a wide banner, and a circular avatar.

A generated crop is a separate image whose pixel dimensions match the intended output. It can reduce transfer size, prevent hidden regions from being downloaded, and provide stable dimensions to feeds, email templates, downloads, or other systems. Choose between these models before choosing a CSS technique, because identical-looking results can have very different security, performance, and reuse properties.

Use object-fit for semantic images

For a meaningful image, an img element usually provides the cleanest markup because it retains alternative text, intrinsic dimensions, loading behavior, and responsive source selection. Give its container a definite width and height or an aspect ratio, set the image to fill that box, and use object-fit: cover. The browser scales the image without distortion until the box is covered, then hides the excess along one axis.

object-position controls which part survives that trimming. The default center is adequate only when subjects are consistently centered. Percentages such as 70% 30% can preserve an off-center face or product, while lengths can express a fixed offset in a controlled component. Test the position at every destination ratio because a focal setting that works in a wide card can cut the same subject in a tall card.

Build controlled offsets with an overflow wrapper

An overflow wrapper gives more direct control when object-position is not expressive enough. Place the image inside a relatively positioned element with fixed dimensions and overflow: hidden, then move or scale the image within it. This pattern supports editor-defined offsets, zoom controls, and focal regions that do not align with simple top, center, or bottom gravity.

Keep the coordinate model independent of the current viewport. Fixed pixel translations often fail when the wrapper becomes responsive, while normalized offsets can be recalculated for each size. Also account for transforms when measuring the image: a translated or scaled image may look correct even though its untransformed layout box is elsewhere. Reserve the destination space up front so loading does not move surrounding content.

Reserve backgrounds for decorative artwork

A CSS background with background-size: cover behaves much like object-fit: cover, but it belongs to the element's decoration rather than document content. That makes it appropriate for textures, ornamental hero artwork, or imagery whose meaning is already conveyed by nearby text. background-position provides focal control, and separate media queries can select different resources or positions.

Do not move an informative photograph into a background merely to simplify cropping. Background images do not accept alt text and may disappear in high-contrast, printing, or user stylesheet scenarios. If the image communicates a person, product, diagram, or event, retain an img or picture element and use CSS for its presentation. The semantic choice should precede the styling choice.

Separate box geometry from clipping geometry

The aspect-ratio property creates a responsive rectangle without the old percentage-padding calculation. It does not crop by itself. The element still needs object-fit, overflow, or another clipping rule to decide what happens when the source and destination ratios differ. Older padding-based techniques can remain in legacy code, but mixing them with an explicit height often creates confusing sizing behavior.

clip-path creates circles, polygons, and other nonrectangular views. It changes the painted outline without producing a newly shaped image file, and the original rectangular resource is still transferred and decoded. Leave enough room for focus indicators and captions, and test the shape at small sizes. A decorative hexagon that looks distinctive at desktop size can obscure a face or become unrecognizable in a compact list.

Art-direct compositions instead of stretching one crop

Responsive resolution selection and art direction solve different problems. A srcset normally offers the same composition at several pixel densities or widths. A picture element can instead select distinct source files for different media conditions, allowing a close portrait on a phone and a wider contextual scene on a desktop. The img child still supplies the shared alternative text and fallback.

Art direction is preferable when no single crop preserves the intended story across ratios. Store the editorial choice as asset metadata rather than burying it in a component-specific CSS offset. That makes the decision reusable in another interface and reviewable when layouts change. Preserve the original alongside approved variants so a future placement is not forced to crop an already cropped file.

Generate derivatives when the crop must persist

For stable placements, create a server-side derivative with explicit output requirements. Transloadit's /image/resize Robot supports width and height with the fillcrop resize strategy when an exact rectangle should be filled. Its gravity can use a positional value or the attention and entropy modes for automatic point-of-interest choices. Those automated modes are useful defaults, but important compositions still need review.

An explicit crop object can instead describe the top-left and bottom-right coordinates using pixels or percentage strings. In that mode, the crop coordinates define the output region and the resize strategy is selected automatically; width and height are ignored. If a specific final size is also required, use a following resize step. Store outputs under versioned or content-derived paths so a changed crop policy does not leave stale files under an old cache key.

Test the crop as content, not only as CSS

Build a fixture set containing panoramas, tall phone photos, tiny images, transparent files, off-center subjects, text near edges, and sources with unusual orientation. Inspect the smallest and largest responsive breakpoints, browser zoom, high-density displays, and slow loading. Automated checks can confirm output dimensions and layout stability, but a visual review is still needed to detect severed faces, missing labels, or misleading composition.

Cropping does not repair accessibility or remove sensitive material. Alternative text should describe what remains meaningful in the displayed view, while decorative images should have an appropriate empty alternative or remain CSS decoration. Never use overflow, object-fit, or clip-path to conceal personal information, document edges, or private bystanders because users can still retrieve the complete source. Generate a sanitized derivative when pixels must truly be removed.

Frequently asked questions