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

Question

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);
}

I mean when it's square resize it to small square – AFB Jul 19 '13 at 12:05 — AFB, Jul 19 '13 at 12:05

omma2289 · Accepted Answer · 2013-07-20T01:13:18.497

8

METHOD 1

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

HTML

<div class="img-container">
    <img src="http://lorempixel.com/250/250" />
</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 class="img" style="background-image:url('http://lorempixel.com/250/250')"></div>

CSS

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

edited Jul 20 '13 at 01:13

answered Jul 19 '13 at 18:15

omma2289

That was great, but still only one problem now if the height is 720 and width 120 the size changed but not to a square, it changed to a rectangle, I tried `width: 100%;` it was fixed but the opposite happened. is there any way to do both height and width? By the way Thanks, for your great effort :) – AFB Jul 20 '13 at 01:05
@KevinMartin method 1 will only work for one of the other, with method 2 you can have both, I updated the second fiddle because for some reason it was the same as the first – omma2289 Jul 20 '13 at 01:19
1

If you know if an img is one or the other you could have two classes that implement method 1, one with height:100% and the other with width:100%. With method 2 you just have the limitation of browser support for `background-size` – omma2289 Jul 20 '13 at 05:05

score 1 · Answer 2 · answered Jul 19 '13 at 12:12

1

try this

<div style="width:90px; height:90px; overflow:hidden;">
<img src="Message.png"/>
</div>

answered Jul 19 '13 at 12:12

Ankit Jain