Cropping Images with CSS

There are a few ways to crop images using CSS.

The first approach is to use a container with relative positioning and hidden overflow, then adjust the orientation of the image using absolute positioning.

The second approach is to simply use object-fit and object-position to adjust the size and orientation of the image.

Here's a straight-forward example of the two strategies at work.