Center and crop image with pure CSS
It’s simple. Set your image crop dimensions and use this line in your CSS:
img { object-fit: cover; }
That’s it. No need for unsemantic, wrapping divs or any other nonsense.
This technique works great for cropping awkwardly-sized pictures down to squares or circles. Take this wide photo below for example. Once object-fit: cover is applied to the image and a width and height are set, the photo crops and centers itself.
img{ height: 400px; display: block; width: 100%; object-fit: cover; }
Before:
![Center and crop images with CSS: image-before](https://blog-tawfiq:8890/wp-content/uploads/2018/02/image-before.jpg)
After object-fit:
![Center and crop images with CSS: image-after](https://blog-tawfiq:8890/wp-content/uploads/2018/02/image-after.jpg)
object-fit: cover crops the exact same way background-size: cover does, but is used for styling imgs, videos and other media tags rather than background images.