Cropping images with nothing but CSS

The developer encountered a design challenge while developing the Arroyo WordPress theme, where different post styles required different image orientations.

Core Solution: “Contain an unconstrained image inside a div with overflow: hidden;”

Basic Markup:

<div class="side-crop">
	<img src="pug.jpg" alt="pug wrapped in a blanket">
</div>

CSS Implementation:

.side-crop { max-width: 375px; overflow: hidden; }
.side-crop img { max-width: initial; }

Positioning Adjustments: Using negative text-indent adjusts crop positioning: .side-crop { text-indent: -140px; }

Center Cropping: Percentage-based indents like text-indent: -50%; center the crop equally.

Vertical Cropping: The technique also works vertically using height instead of max-width and negative margin-top instead of text-indent.

Downsides: Loading oversized images wastes bandwidth. Resize images beforehand — Arroyo loads the “Large” size (maximum 1024x1024) to balance flexibility with efficiency.