Faux Crop any size image with CSS

A quick tip on how to crop any sized image through CSS

20 Comments


  1. Thanks for the tiaorutl! I’m almost there, but for some reason my images open up in a new window, and do not replace the other image. Please help! Thanks!

    Reply

  2. THANK YOU. I was looking for something clean and simple for a photo gallery and this is it! Thank you so much!

    Reply
  3. Mike

    Thank you so, so much! Such an easy and elegant fix for something that has been driving me mad for the last 4 hours!

    Honestly, people, like yourself who post things like this, really are exceptionally wonderful human beings! :)

    Reply
  4. Artemisia Moltabocca (@moltabocca)

    Haha! Yes! I have a gallery of images that includes horizontal and vertical images. I wanted a way to crop down the horizontal ones down to a consistent size without having to fire up Photoshop. Now I can delete that annoying “Gallery Images” album. I can now crop the actual image. Thanks so much! *happydance*
    http://costumingdiary.blogspot.com/p/costuming-tutorials.html

    Reply
  5. Hemali

    It Crop image from bottom side. i need to crop image from the top and bottom any idea..?

    Reply

  6. @Hemali That’s not really possible with this technique, and not what it’s intended for. If you need a specific crop a photo editor is your best bet.

    Reply

  7. Thanks this was a great tip and I used on a site to do exactly that, now the image stays in the box even though it’s bigger than the box size – perfect!

    Reply
  8. Timbo

    Awesome, just what I needed. Though like Hemali, I would like to crop the top off too.

    I not an expert, but this seemed to work:

    .container img { width: 100%; position: relative; top: -15px;}

    The above appears to crop the top 15px off the image.

    -Timbo

    Reply

  9. @Timbo,

    That will certainly work if you want every image to be bumped up 15px. If it’s just for one image or a set of images, I’d create a special class and add the positioning to that.

    Reply

  10. Thank you bro!!! really helped me out with a clean photogallery!

    Reply
  11. Andrew

    NICE!!! In practice I found that this code only works if all of the images are taller than they are wide. I had to add some server code to determine whether the width was greater than the height and then apply the width:100% (or height:100%) as an inline style.

    Am I missing something?

    Reply

    • Hi Andrew. I’m not sure what the end goal for your site is but this technique is meant to crop an image to fill a defined area. I wrote it quite a while ago, and while it still gets some a few hits, there are perhaps better ways to manage images these days – Especially when designing responsively or fluidly.

      Reply

  12. You reallyy make iit seem so easy with your presentation but I find this matter to be really something which I think I would never
    understand. It seems too complex and very broad for me.

    I am looking forward for your next post, I will try to get the hang of it!

    Reply

  13. This is the first step on the way of how to become a Diving
    Instructor and it teaches you the necessary skills
    and methods for you to become a competent diver. With a motorhome rental in NZ, you will be able to
    explore the entire country and all of the best camping destinations throughout, no
    matter what you might be looking for. Located in a much
    quieter area than the other dive shops, at the far end of the beach, the
    hotel is more upmarket than most on the island although the ‘free’
    rooms are still basic.

    Reply

Leave a Reply

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