Brush up on your image cropping techniques with this in-depth CSS tutorial featuring eight examples every developer should know.

Let’s say you’re working on a project and need to crop an image for display, but realize that you don’t have access to your favorite image editor. Don’t fret. CSS has got you covered with a suite of properties that make image cropping possible right there in your browser.

This article explains how to use these properties through eight different examples. In the end, a cropped image is displayed in your browser, and you are armed with the following eight techniques for cropping images with CSS.

• Using object-fit and object-position
• Aspect ratio cropping with calc() and padding-top
• Using CSS Transforms
• Circular cropping with border-radius
• Using parent and image dimensions with overflow and width
• Pan to crop with margin-top and margin-bottom
• Pan to crop with margin-left, margin-right, and width
• Using the clip-path() function

#css #webdev