How to Crop an Image in CSS

To crop an image in CSS, give it a defined display box, use object-fit: cover, and adjust object-position. Add a circular or polygonal clipping path when you want a shaped frame rather than a rectangle.

1. Choose between a display crop and an exported image

A CSS crop is useful when the same photograph needs several presentations: a wide card on a listing page, a square thumbnail in search, and a round author portrait. The page keeps referencing the same image while each element controls its own visible area. You can revise the framing without editing the source.

An exported crop serves a different purpose. It creates a new image whose pixel dimensions and visible content can be used outside that page. Choose the Square Image Cropper when you need a square file, rather than only a square presentation. Keep the original separately so you can reframe it later.

2. Create a predictable crop box

1. Define the display frame using a width and aspect-ratio, with the other dimension automatic.
2. Apply object-fit: cover to the image element so the frame is filled without stretching.
3. Set object-position to keep the important subject in view.
4. Add a square circle clip or polygon clip when the visible outline should be shaped.
5. Check the result at narrow and wide screen sizes, then inspect whether the source resource itself is appropriately sized.

Start with a landscape frame. The following complete HTML example uses an embedded SVG illustration as its image source, so it can run without a separate image file or network request. Save it as an HTML file and open it in a browser. Replace the src value with your own photograph when integrating it into a site.

<!doctype html>
<html lang="en">
<meta charset="utf-8">
<title>CSS crop example</title>
<style>
  .crop {
    display: block;
    width: min(100%, 36rem);
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: 50% 35%;
  }
</style>
<img class="crop" alt="Illustrated portrait on a blue background"
     src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='600' viewBox='0 0 900 600'%3E%3Cpath fill='skyblue' d='M0 0h900v600H0z'/%3E%3Ccircle fill='coral' cx='450' cy='220' r='110'/%3E%3Cpath fill='teal' d='M250 600V430a200 200 0 0 1 400 0v170'/%3E%3C/svg%3E">
</html>

The width limits the frame while allowing it to shrink on narrow screens. The preferred ratio supplies its height because height remains automatic. If you explicitly set both width and height, aspect-ratio does not override those dimensions. A ratio describes the box, not a command to preserve every part of the source image.

MDN documents this behavior in its aspect-ratio reference. The official CSS Sizing specification defines preferred aspect ratios. Be careful with existing theme rules that impose a fixed height, because they can prevent the ratio from controlling the result.

3. Fill the box without stretching the photograph

Use object-fit: cover when the frame must be completely filled. The browser preserves the source proportions and scales the image until both box dimensions are covered. Any excess falls outside the visible content box. A tall portrait in a wide frame therefore loses content above and below, rather than becoming unnaturally wide.

By contrast, contain preserves the whole image and can leave unused bands. The initial fill value can distort an image when the box and source ratios differ. These differences are defined in MDN’s object-fit reference and the official CSS Images specification.

Apply object-fit to the image itself, not just its parent. Setting a parent’s aspect ratio alone does not make a child image fill it. If your layout uses a wrapper, give the image width: 100% and height: 100% so its content box matches that wrapper before applying cover.

4. Move the focal point with object-position

The default alignment is centered. For a portrait, moving the vertical alignment toward the top often protects the head. In the example, 50% 35% keeps horizontal alignment centered while shifting the visible framing toward the upper portion of the source. Start with modest adjustments and compare the result at several widths.

Percentages align corresponding points of the image and its box. They are not a direct instruction to place a detected face at a coordinate. A change may appear ineffective on an axis where the scaled image has no excess to crop. The MDN object-position documentation explains the alignment syntax.

For a collection of portraits, store a focal position per image rather than assuming one setting suits everyone. Test unusually tall, wide, and off-center photos. Keep meaningful alt text about the image’s purpose, and do not use alt text as a substitute for ensuring the subject remains visible.

5. Make circle and hexagon display crops

Use a square box for a circle

A circle needs equal width and height for the simple avatar treatment below. Insert the following complete <style> block after the first example’s closing </style> tag, then change the image’s class attribute to class="crop circle". The image still uses cover for composition; the clipping path controls the outer silhouette. The original SVG or photo remains unchanged.

<style>
  .crop.circle {
    width: min(100%, 15rem);
    aspect-ratio: 1 / 1;
    clip-path: circle(50% at 50% 50%);
  }
  .crop.hexagon {
    width: min(100%, 20rem);
    aspect-ratio: 1 / 1;
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%,
                       75% 100%, 25% 100%, 0% 50%);
  }
</style>

For a basic round avatar, border-radius: 50% is another option on a square image box. On a rectangular box that treatment produces an ellipse. A circle clipping path is more explicit about the shape, but percentage circle radii use the reference box’s normalized diagonal, so keeping the box square also makes the sizing easy to reason about.

Use polygon coordinates for a six-sided frame

Change the image class to crop hexagon to use the second rule. Its six coordinate pairs trace a flat-topped hexagonal silhouette around a square reference box. This is a stylized hexagon, not a mathematically regular one. For a regular flat-topped hexagon with these coordinates, use a box ratio of 2 / 1.7320508 instead.

See MDN’s clip-path reference, its polygon documentation, and the official CSS Masking specification. Shape geometry is defined in CSS Shapes. Clipping hides painted content without turning the layout box into a polygon.

If you need those shapes in a downloadable file, use the Circle Image Cropper or Hexagon Image Cropper. CSS alone does not produce a transparent PNG for an upload form, slide deck, or document.

Common problems

The photo is stretched or not cropped

Check that cover reaches the image element and that its box has a constrained shape. A natural-width image with automatic height may simply preserve its original ratio, leaving nothing to crop. Inspect computed styles for a competing height rule or an overridden object-fit declaration.

The page still downloads a large image

A display crop does not reduce the source file’s transfer size. Supply appropriately sized image resources, or export a smaller crop when the composition is fixed. Read crop versus resize to separate removing content from changing pixel dimensions.

The face becomes soft or gets cut off

Avoid enlarging a tiny source and test the focal point in the final layout. Keep a higher-resolution original for future exports. The guide to cropping without losing quality explains why framing, output dimensions, and compression require separate decisions.

Frequently asked questions

Does CSS cropping change the original image file?

No. CSS changes the displayed region inside the page. It does not rewrite the source image or create a separate cropped download.

What is the difference between cover and contain?

Cover fills the image box while preserving proportions and may hide edges. Contain shows the entire image while preserving proportions and may leave empty space.

Why does object-position sometimes do nothing?

If the scaled image exactly fits the box along an axis, there is no excess content to move into view on that axis. Check the image and box ratios first.

Can I make a circle with border-radius?

Yes. Give the image equal width and height, apply object-fit: cover, and use border-radius: 50%. Unequal dimensions create an ellipse instead.

Can visitors download the CSS crop as a PNG?

CSS alone does not generate that file. Export the crop with an image editor or a canvas-based cropper when you need a PNG containing the selected composition.