Center and crop thumbnails with CSS
Here is a handy CSS centering technique I first noticed in the WordPress media library, where it is used to centre and crop irregularly sized thumbnails within a square container.
The technique uses CSS3 transforms, so it works in all modern browsers, including IE9 and above.
<div class="thumbnail">
<img src="landscape-img.jpg" alt="Image" />
</div>
<div class="thumbnail">
<img src="portrait-img.jpg" class="portrait" alt="Image" />
</div>.thumbnail {
position: relative;
width: 200px;
height: 200px;
overflow: hidden;
}
.thumbnail img {
position: absolute;
left: 50%;
top: 50%;
height: 100%;
width: auto;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
.thumbnail img.portrait {
width: 100%;
height: auto;
}The technique works by positioning the image so that its top left corner is in the centre of its container. Then, a 2D translation moves it up and left by half its own width.
The key here is that the percentage values passed to the translate function are relative to the element, not its container, as would be the case if we were to manipulate the element’s top and left properties instead.
Note that the portrait format image has the class portrait, so that we can correctly scale it to fill its container.
So there you go. A really simple CSS technique for centering and cropping thumbnails.
48 thoughts on “Center and crop thumbnails with CSS”
Comments are closed.
By far the best solution for the images without using the thumbnail image as a background cover.
BRILLIANT!
I’ve been fighting with this for too long. Brilliant solution. Thank you very much mate.
You’re the MAN ;)
Exactly what I was looking for. Perfectly explained. Thanks!
Perfect solution to my problem :). Thanks man
Wouldn’t
object-fit: cover;
object-position: center;
just do the job?
@HH Bear in mind that browser support for object-fit is patchy. Internet Explorer doesn’t yet support it yet, and Firefox only added support last month. Safari iOS version 7 and lower don’t support it either. There is a polyfill though https://github.com/anselmh/object-fit/
Thankyou, kind sir. This is exactly what I was looking for.
Your solution looks good. Thanks!
Thx Jonathan! Very good idea HH! That’s true the Internet Explorer doesn’t yet support it yet, maybe the Project Sparatan do support. http://caniuse.com/#feat=object-fit
What if I want the horizontal to be centre like it is now but have the vertical to be the top of the image rather than the centre of the image?
Excellent example. Does exactly what is says on the tin.
I do however have a followup question:
If a border is added to “.thumbnail” and the image is not wide enough to fill .thumbnail there is space between the border and the actual picture.
If the border is added to “.thumbnail img” then the border is moved with the image when it is transformed and the border is not visible (because of overflow:hidden).
So, how can borders be added to the image?
My above comment also applies to border-radius.
If a border-radius is set on the image, and the image is bigger than .thumbnail, the border-radius is hidden by “overflow: hidden”.
Hello,
Great idea. I was going to do it with a programmatically solution in my project. But this one sounds better. low bandwidth usage.
Very nice. I think this should have been the first thing that pops up on google when I was looking for this. Exactly what I need. IE…this was the only work around that makes sense.
Tried using background drops with div since you have better control with backgrounds for whatever reason…but images do not show up when printing.
So found this
@media print {
.class {-webkit-print-color-adjust:exact;}
}
Worked with Chrome and I think Safari..but not chrome of Firefox.
Then I reverted back and found the below might work
object-fit: cover;
object-position: center;
They did but not for IE…
Finally you made my day. That is it, Thank you.
Also viewing it locally sometimes on IE does not use the translation stuff… This probably happens for a small amount of people but go to compatibility settings and unclick ‘display intranet sites’
Thanks you!!
Any improvement for IE7 or IE8? -ms-filter or something?
@hurelhuyag Sorry, I only support IE9+ these days and don’t provide fallbacks for older versions of IE.
Thank you for this fine solution!
Since it’s almost always for dynamic content, I usually go with the “dynamic background” solution, when accessibility is absolutely not required :
in the css file :
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
in the html, a style=”background-image: url(…);”
http://jsfiddle.net/dievardump/vzj4vwyx/1/
You are a life saver! It took me forever to find this article, but thankfully I did. I couldn’t, for the life of me, figure out how to vertically crop an image with CSS. I had never even considered transform. Thanks Jonathan!
Thank you. It is very useful
Thanks a lot!! Was trying to fix it for quite a while and this method worked!!
Thanks, Jonathan, also from my side. Your post helped me to manifest my big gallery dream a while ago, and now I was even able to make my calendar dream come true. I have created a tutorial about my recent quest and linked back to you there, I hope you don’t mind :)
http://wptraining24.com/all-in-one-event-calendar-theme-customization-tutorial-my-perfect-wordpress-calendar/
Wonderful. I was using javascript to do that. Your solution is much better. Thanks.
Very nice solution , it solved my problem of image stretching.
Thanks a lot :)
How can I do this for blogger?
Thanks a lot. its working fine for me.
I guess image width should be 100%. so we dont need to make it center horizontally.
This is great! Thanks!
My gratitude knows no bounds. Thanks man.
Thank you. Works great for modern browsers and as mentioned by many, it just doesn’t work in Internet Explorer. However, it’s truly the way it should be done vs. using CSS background image url(). I just wanted to note that when using any server-side scripting, currently I am using php, it should be easy to check for browser compatibility and deliver the right html / css code.
MS is trying so hard to kill IE for good and therefore a simple if-then-else statement will provide modern browser compatibility and better hardcopy-print/pdf-print printability when a browser’s “print background” is disabled.
Thanks again
@Lara It works in IE9 or higher. IE8 has a worldwide market share of 1.8% according to statcounter.com, which is a vanishingly small percentage. Unless it is a specific requirement of your project that you have to support IE8 then you can use this technique without an IE8 fallback.
@Jonathan you are correct. My stylesheet for some odd reason did not work when it was embedded within the actual page code. Once I removed code from page and created an external css file it worked perfectly on IE. I really don’t understand why!
I have been playing with your recommended CSS trying to accommodate for panoramic photos, nevertheless, I have failed to create a unified CSS that can accommodate for that. Any ideas?
Thanks again for sharing / Lara.
Great workaround!
Thanks a lot for sharing.
Chris
Just wanna thank you for this. Elegant solution and just what I needed!
With CSS3 it’s possible to change the size of a background-image with background-size, fulfilling both goals at once. it’s great to know that :)
When printing the page, the image renders with the wrong aspect ratio in the print preview window. I have not been able to find a solution to this.
Thank you for this wonderful tips. You saved my days. Awesome article.
insanely cool :) Thank you very much :)
Nice blog, it’s solved my problem of image blurred.
Thanks..
Thanks! You solved my problem!
Simply one word Awesome!!
NICE! Thanks a lot ^^
When it’s dynamic content, impossible to do that, i tryed get image size with php but this is too slow, and javascript solution are too slow too.
Great stuff, problem solved.
Hi, ease method
img {
height: 200px;
width: 100%;
objext-fit: cover;
object-position: center // initial var
}
Thankyou! Exactly what I was looking for