Clip a Photograph

Apply clip-path to an img. Meaning stays in alt; the shape is presentation.

Circle and freeform crop

img { width: 280px; height: 280px; object-fit: cover; clip-path: circle(48%); }

Sunlit forest path between tall trees

circle(48%)

Rocky shoreline beside calm water

polygon(…)

Pair a fixed slot with object-fit: cover, then clip the visible paint.
Do not hide the only description of the photo inside the clipped area — use alt.

Important HTML

Images keep meaningful alt text; the clip is presentation.

<img class="photo photo-circle"
     src="…" alt="Sunlit forest path">

Important CSS

Clip after sizing the photo slot.

.photo {
  width: 280px;
  height: 280px;
  object-fit: cover;
}
.photo-circle { clip-path: circle(48%); }