How to center and crop an image to always appear in square shape with CSS?

Question

I need to always crop a random-sized image to a square 160x160 using only CSS. The images should stay centered when cropped.

My markup should be:

<a href="#" class="cropper">
   <img src="image" alt="description" />
</a>

Searching on StackOverflow I've found some answers (such as CSS - How to crop an image to a square, if it's already square then resize it), but they don't work for cases where your image can be larger horizontal (wide) OR vertical (tall).

Specifically, I need to be able to present both a wide image like this:

and a tall image like this:

in square form, without knowing in advance which one is a horizontal rectangle or a vertical rectangle. It should also support already squared images.

Propably not the answer you are looking for, but why not give `background-size:cover` a try? — RienNeVaPlu͢s, Sep 07 '13 at 13:42
http://stackoverflow.com/questions/15167545/how-to-crop-a-rectangular-image-into-a-square-with-css?rq=1 — SachinGutte, Sep 07 '13 at 13:48
@Itay it doesn't work, I've replied to his question with a fiddle,a nd by the way it doesn't center the image. — PurpleFoxy, Sep 07 '13 at 13:57

Itay · Accepted Answer · 2020-08-26T13:57:16.053

105

jsFiddle Demo

div {
    width: 250px;
    height: 250px;
    overflow: hidden;
    margin: 10px;
    position: relative;
}
img {
    position: absolute;
    left: -1000%;
    right: -1000%;
    top: -1000%;
    bottom: -1000%;
    margin: auto;
    min-height: 100%;
    min-width: 100%;
}

<div>
    <img src="https://i.postimg.cc/TwFrQXrP/plus-2.jpg" />
</div>

A note regarding sizes

As Salman A mentioned in the comments, we need to set the img's position coordinates (top, left, bottom, right) to work with percents higher than the image's actual dimensions. I use 1000% in the above example, but of course you can adjust it according to your needs.

* Further explanation: When we set the img's left and right (or: top and bottom) coordinates to be -100% (of the containing div), the overall allowed width (or: height) of the img, can be at most 300% of the containing div's width (or: height), because it's the sum of the div's width (or: height) and the left and right (or: top and bottom) coordinates.

edited Aug 26 '20 at 13:57

answered Sep 07 '13 at 14:08

Itay

16,601
2
51
72

I need to make them to fit the "thumbnail" space – PurpleFoxy Sep 07 '13 at 14:19
If images are larger than div, you should better `width: 100%` for portrait images or `height: 100%` for landscape ones to the img tag. – hiroshi Aug 17 '14 at 11:08
2

Does it work if the image is larger than 300% of the div size? [I don't think so. FIDDLE](http://jsfiddle.net/salman/J7a5R/465/) – Salman A Oct 31 '14 at 16:25
@SalmanA You're right. But it works decently otherwise. I guess it can be improved. – Itay Oct 09 '15 at 05:59
1

@Itay just use large (but sensible) number instead of 100%. – Salman A Oct 09 '15 at 07:35

score 52 · Answer 2 · edited Oct 06 '17 at 09:37

object-fit property does the magic. On JsFiddle.

CSS

.image {
  width: 160px;
  height: 160px;
}

.object-fit_fill {
  object-fit: fill
}

.object-fit_contain {
  object-fit: contain
}

.object-fit_cover {
  object-fit: cover
}

.object-fit_none {
  object-fit: none
}

.object-fit_scale-down {
  object-fit: scale-down
}

HTML

<div class="original-image">
  <p>original image</p>
  <img src="http://lorempixel.com/500/200">
</div>

<div class="image">
  <p>object-fit: fill</p>
  <img class="object-fit_fill" src="http://lorempixel.com/500/200">
</div>

<div class="image">
  <p>object-fit: contain</p>
  <img class="object-fit_contain" src="http://lorempixel.com/500/200">
</div>

<div class="image">
  <p>object-fit: cover</p>
  <img class="object-fit_cover" src="http://lorempixel.com/500/200">
</div>

<div class="image">
  <p>object-fit: none</p>
  <img class="object-fit_none" src="http://lorempixel.com/500/200">
</div>

<div class="image">
  <p>object-fit: scale-down</p>
  <img class="object-fit_scale-down" src="http://lorempixel.com/500/200">
</div>

Result

It's definitely the way to go unless you really need IE support. Even then, it's probably better just to inform your users they need to switch to a modern browser... — Danish Ashfaq, May 25 '16 at 10:26
Great to know that this exists! Let's hope full cross-browser compatibility soon. — Alvaro, Oct 18 '16 at 17:54

score 16 · Answer 3 · edited Jun 12 '14 at 05:33

16

<div>
    <img class="crop" src="http://lorempixel.com/500/200"/>
</div>

<img src="http://lorempixel.com/500/200"/>




div {
    width: 200px;
    height: 200px;
    overflow: hidden;
    margin: 10px;
    position: relative;
}
.crop {
    position: absolute;
    left: -100%;
    right: -100%;
    top: -100%;
    bottom: -100%;
    margin: auto; 
    height: auto;
    width: auto;
}

http://jsfiddle.net/J7a5R/56/

edited Jun 12 '14 at 05:33

Snicolas

37,840
15
114
173

answered Mar 05 '14 at 08:02

DeathGrip

171
1
5

Just perfect, this will be the correct answer I think – Lloople Feb 08 '15 at 12:46
This solution does not work when using images out of the scale `500x200`/`250x100` – Ron van der Heijden Apr 22 '15 at 14:34

Matt Fletcher · Answer 4 · 2018-04-26T08:46:24.490

With the caveat of it not working in IE and some older mobile browsers, a simple object-fit: cover; is often the best option.

.cropper {
  position: relative;
  width: 100px;
  height: 100px;
  overflow: hidden;
}
.cropper img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Without the object-fit: cover support, the image will be stretched oddly to fit the box so, if support for IE is needed, I'd recommend using one of the other answers' approach with -100% top, left, right and bottom values as a fallback.

http://caniuse.com/#feat=object-fit

score 1 · Answer 5 · answered Sep 07 '13 at 13:48

1

Try putting your image into a container like so:

HTML:

<div>
    <img src="http://www.testimoniesofheavenandhell.com/Animal-Pictures/wp-content/uploads/2013/04/Dog-Animal-Picture-Siberian-Husky-Puppy-HD-Wallpaper.jpg" />
</div>

CSS:

div
{
    width: 200px;
    height: 200px;
    overflow: hidden;
}

div > img
{
    width: 300px;
}

Here's a fiddle.

answered Sep 07 '13 at 13:48

MisterBla

2,355
1
18
29

@PurpleFoxy It would work best with a more square image, guess you'd need to play with the dimensions a bit. – MisterBla Sep 07 '13 at 14:02

RbG · Answer 6 · 2013-09-07T14:33:49.363

1

clip property with position may help you

a{
position:absolute;
clip:rect(0px,200px,200px,0px);
}

a img{
position:relative;
left:-50%;
top:-50%;
 }

WORKING FIDDLE

edited Sep 07 '13 at 14:33

answered Sep 07 '13 at 14:08

RbG

3,181
3
32
43

khoa · Answer 7 · 2017-04-12T08:18:25.397

1

I found a better solutions in following link. Only use "object-fit" https://medium.com/@chrisnager/center-and-crop-images-with-a-single-line-of-css-ad140d5b4a87

edited Apr 12 '17 at 08:18

answered Apr 12 '17 at 08:12

khoa

31
1
4

1

It's worth noting this is not supported in IE – Clay Banks Aug 01 '17 at 05:12
1

This is more or less just repeating [this existing answer](https://stackoverflow.com/a/35063374). – Pang Mar 20 '18 at 02:53

score 0 · Answer 8 · answered Sep 07 '13 at 14:01

0

<div style="specify your dimension:overflow:hidden">
    <div style="margin-top:-50px">
       <img ...  />
    </div>
</div>

The above will crop 50px from the top of the image. You may want to compute to come up wit a top margin that will fit your requirements based on the dimension of the image.

To crop from the bottom simply specify the height of the outer div and remove the inner div. Apply the same principle to crop from the sides.

answered Sep 07 '13 at 14:01

Omirp

52
3

In this way I need to know if the image is rectangular or horizontal and I also need to know how many pixel I need to move the image. Is not a solution at all. – PurpleFoxy Sep 07 '13 at 14:04

score 0 · Answer 9 · answered Aug 12 '14 at 08:49

0

HTML:

<div class="thumbnail">
</div>

CSS:

.thumbnail { 
background: url(image.jpg) 50% 50% no-repeat; /* 50% 50% centers image in div */
width: 250px;
height: 250px;
}

answered Aug 12 '14 at 08:49

Priya

89
1
1

Ben Carp · Answer 10 · 2023-08-26T12:28:38.400

0

2023 answer

img {
  width: 200px; /* Determines square size */
  aspect-ratio: 1/1; /* Will keep height equal to width */
  object-fit: cover; 
}

<img src="https://i.stack.imgur.com/HkGvg.jpg" />

edited Aug 26 '23 at 12:28

answered Aug 26 '23 at 12:21

Ben Carp

24,214
9
60
72

How to center and crop an image to always appear in square shape with CSS?

10 Answers10

A note regarding sizes

2023 answer

Linked