CSS - How to crop an image to a square, if it's already square then resize it

Let's say that I have an image with 250 width and 250 height and I want to crop it to 90x90

It will show me pixels from the image, but I want to crop it if it is rectangle and resize it if it's square, So how can I do it?

This is the CSS code that crops the image, but how do I resize it?

.image{ width:90px; height:90px; } .image{ display: block; overflow:hidden; clip:rect(0px,90px,90px,0px); }

2 Answers

Will work for horizontal rectangle images (larger in width), if you need vertical images you can change height:100% for width:100%

HTML

<div> <img src="" /> </div>

CSS

.img-container { width: 90px; height: 90px; overflow: hidden; } .img-container img { height: 100%; }

Example fiddle First image is resized, second is cropped

Works for all image sizes

HTML

<div></div>

CSS

.img{ width: 90px; height: 90px; background-size: cover; }

try this

<div> <img src="Message.png"/> </div>