Css Display an Image Resized and Cropped

html

responsive-design

css-animations

accessibility

byAnton Shumikhin·Nov 1, 2024

To resize and crop an image efficiently, utilize a container with a specific width and height, along with an img element that uses the object-fit: cover; CSS property. This ensures that the image fully covers the dimensions of the container, with any excess parts cropped while preserving the aspect ratio.

<div style="width: 200px; height: 150px; overflow: hidden;">
  <img src="image.jpg" alt="Cropped" style="object-fit: cover; width: 100%; height: 100%;">
</div>

This approach will conveniently create a 200x150px cropped image, irrespective of your original image size.

The CSS hacks you wouldn’t find in Hogwarts' library!

Upscaling for CRISPR Images (not the gene editing tool)

Use larger resolution images for HD displays as they downsize gracefully, unlike the cake you tried to bake last night!

Moving the picture within its frame

Sometimes, object-fit feels like it has a mind of its own! For more control over image position, use background-position: center; or negative margins.

Responsiveness is not Revenge

Always put on your mobile first glasses! Your users might be seeing your page through a keyhole! Properties like background-size: contain; or background-size: cover; make your images look good on any device.

Post-Cropping Makeover

We all love some Instagram vibes, don't we? To feel the chic effect, apply some border-radius to your images after cropping or animate them using CSS animations!

Old School isn't always cool

While we all love vintage records, avoid outdated CSS methods like clip. Trust me, your sanity certificate will thank you later!

Maintainability or cry over Spilt Milk

While crafting your CSS magic, make sure your potions are reusable. Pour your styles into CSS classes, not inline. Code is like your bedroom, clean it or lose everything!