How to center and crop the image to always be displayed in square form using CSS?

Question

I need to always crop a random size image to a 160x160 square using only CSS. Images should remain centered when cropping.

My markup should be:

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

Searching in Qaru. I found several answers (for example, CSS - How to crop an image to a square, if it is already square, and then resize it ), but they do not work when your image can be larger horizontally (wide) or vertically (high).

In particular, I should be able to present both wide images, like this:

and a tall image like this:

in square form, not knowing in advance which one is horizontal or vertical. It should also support already square images.

Answer 1

JsFiddle Demo

 div { width: 200px; height: 200px; overflow: hidden; margin: 10px; position: relative; } img { position: absolute; margin: auto; min-height: 100%; min-width: 100%; /* For the following settings we set 100%, but it can be higher if needed See the answer update */ left: -100%; right: -100%; top: -100%; bottom: -100%; } 

---

Update - Improvement

As Salman A mentioned in the comments, the original solution has a drawback - it does not work if the height or width of img (or both) (at least) is 3 times * larger than the containing div.

The problem is displayed here .

Salman also gave a really simple and elegant solution. We just need to update the coordinates of the img position (top, left, bottom, right) to work with higher percentages. The following fix works with 1000%, but of course you can customize it according to your needs.

the working version is shown here .

* The reason is that when we set the img left and right (or: top and bottom) coordinates to -100% (of the containing div), the total allowable width (or: height) of img can be equal to at most 300% of the containing div (or: height), because this is the sum of the width of the div (or: height) and the left and right (or: upper and lower) coordinates.

Answer 2

The object-fit property does 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

Answer 3

 <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/

Answer 4

Given that it does not work in IE and some older mobile browsers, a simple object-fit: cover; 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 support for object-fit: cover image will stretch strangely to fit the frame, so if IE support is required, I would recommend using one of the approaches with other answers with -100% on top, left, right and lower values ​​as a fallback.

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

Answer 5

Try putting the image in a container like this:

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 the fiddle .

Answer 6

clip property with position can help you

 a{ position:absolute; clip:rect(0px,200px,200px,0px); } a img{ position:relative; left:-50%; top:-50%; } 

WORKING FIDDLE

Answer 7

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

Answer 8

I found the best solutions in the following link. Use only the “fit object” https://medium.com/@chrisnager/center-and-crop-images-with-a-single-line-of-css-ad140d5b4a87

Answer 9

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

The above will crop 50 pixels from the top of the image. You may want to calculate to get a top edge that will fit your requirements based on image size.

To crop from the bottom, just specify the height of the outer div and delete the inner div. Apply the same principle to side trim.