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.

cropped-thumbnails

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.

View a demo

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.

47 thoughts on “Center and crop thumbnails with CSS

  1. By far the best solution for the images without using the thumbnail image as a background cover.

    BRILLIANT!

  2. Telemako says:

    I’ve been fighting with this for too long. Brilliant solution. Thank you very much mate.

  3. Artur says:

    You’re the MAN ;)

  4. az says:

    Exactly what I was looking for. Perfectly explained. Thanks!

  5. Paparaxee says:

    Perfect solution to my problem :). Thanks man

  6. HH says:

    Wouldn’t

    object-fit: cover;
    object-position: center;

    just do the job?

  7. Jonathan says:

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

  8. Indiejones says:

    Thankyou, kind sir. This is exactly what I was looking for.

  9. often confused says:

    Your solution looks good. Thanks!

  10. Balazs says:

    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

  11. 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?

  12. Glenn Thomas Hvidsten says:

    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?

  13. Glenn Thomas Hvidsten says:

    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”.

  14. AxentMedia says:

    Hello,
    Great idea. I was going to do it with a programmatically solution in my project. But this one sounds better. low bandwidth usage.

  15. 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.

  16. 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’

  17. dayat says:

    Thanks you!!

  18. hurelhuyag says:

    Any improvement for IE7 or IE8? -ms-filter or something?

  19. Jonathan says:

    @hurelhuyag Sorry, I only support IE9+ these days and don’t provide fallbacks for older versions of IE.

  20. Catalin says:

    Thank you for this fine solution!

  21. dievardump says:

    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/

  22. Mike Hirst says:

    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!

  23. Vero says:

    Thank you. It is very useful

  24. Lola says:

    Thanks a lot!! Was trying to fix it for quite a while and this method worked!!

  25. Sofian says:

    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/

  26. Ashraf Fayad says:

    Wonderful. I was using javascript to do that. Your solution is much better. Thanks.

  27. Jaydevsinh says:

    Very nice solution , it solved my problem of image stretching.
    Thanks a lot :)

  28. Julius says:

    How can I do this for blogger?

  29. Hitesh says:

    Thanks a lot. its working fine for me.
    I guess image width should be 100%. so we dont need to make it center horizontally.

  30. Kenneth Lee says:

    This is great! Thanks!

  31. Laura says:

    My gratitude knows no bounds. Thanks man.

  32. Lara Knoerr says:

    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

  33. Jonathan says:

    @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.

  34. Lara Knoerr says:

    @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.

  35. Chris says:

    Great workaround!
    Thanks a lot for sharing.

    Chris

  36. Bryan says:

    Just wanna thank you for this. Elegant solution and just what I needed!

  37. Madar says:

    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 :)

  38. Sean says:

    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.

  39. Thank you for this wonderful tips. You saved my days. Awesome article.

  40. sangam says:

    insanely cool :) Thank you very much :)

  41. Vinit Bhise says:

    Nice blog, it’s solved my problem of image blurred.
    Thanks..

  42. Lihui says:

    Thanks! You solved my problem!

  43. Sachin Tiwari says:

    Simply one word Awesome!!

  44. Bella Beck says:

    NICE! Thanks a lot ^^

  45. Gino Côté says:

    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.

  46. Francis Kim says:

    Great stuff, problem solved.

  47. Vova says:

    Hi, ease method

    img {
    height: 200px;
    width: 100%;
    objext-fit: cover;
    object-position: center // initial var
    }

Leave a Reply

Your email address will not be published. Required fields are marked *