Image gallery that doesn’t fall apart

There are several techniques for laying out the image gallery (using list-items, simple IMG tags or using links when you create a “clickable” gallery). If you use any of available techniques, you should get the same or almost same effects. And everything works nice as long as you stick with the thumbnails of the same size. But from my experience when working with different people with different computer skill, you can expect almost anything. First of all, they won’t upload the photos of the same size, so everything you worked on falls apart — floats, sizes, aligns.

Image gallery that doens't fall apart

If you use some kind of CMS or your own news script, you can the solution explained in this article. I will show you how to create an image gallery that doesn’t falls apart when different sizes of images are loaded and with no images being distorted.

What are we supposed to do?

We are assuming that our clients have unequal computer skills. They know how to upload a photo, but they don’t like the idea of using a program to prepare it for the web (i.e. make the pictures of same dimensions). So what should we do? If we want to create an image gallery using one of standard techniques, the gallery will fall apart on the picture that is higher than the rest.

I came up with an idea to create an image gallery that will crop the images, so if the image is larger than specified proportions, the overlay won’t be visible. This way, we will create an image gallery that rocks with all the modern and nice things we all use these days :)

The theory

We will create two DIVs that will “contain” the image inside it. This is the code we will be using:

Image 01

You could use only one DIV if you just want to “crop” the image, but I used two instead, so I could create a border around the image that will be 1px outside the image. I used the link so you could link the image with some external big image of your own. You could use just the two DIVs and an image if you’d like — that’s up to you. Let’s style this gallery, shall we?

Styling the images

First of the two DIVs you have for any of your images should have a class. We gave ours class="image". This way you can control the behavior of image gallery and any of the images in it. So, you should decide which width and height you want to use in your gallery. I used the size of 80px for this, so I gave it this width and height. I also gave it a border of 1px. Since I want my images to be apart one from another 10px I used margins (right and bottom) of that value. We also used float:left so our images are aligned to the left. Don’t forget to use position:relative. Without it, we cannot remove the border from the image.

.image {
	border:1px solid #CCC;

OK. And now is time for a little CSS Magic. We added second DIV to “crop” the images. We will do that by using overflow:hidden at this point — everything outside this DIV won’t be visible. We gave this DIV a smaller width and height (i.e. 1px right and 1px left = 2px) because we wanted to “remove” the border from the image for 1px. If we didn’t want to remove a border, or we just wanted to use plain and simple border or no border at all, than we could put the overflow:hidden to the first DIV instead.

Now, as we wanted to move the border away from the image, we positioned this second DIV absolutely. This is possible because we positioned the first DIV relatively.

.image div {

For the last part, we removed the border from the image itself with (obviously) .image img { border:none; }.

The example

Take a look at the example.

Eventual problems

As far as I tested this image gallery on different settings, it works fine, but there is something you should take care of. If you are using some kind of PHP resize script that resizes the image on the fly, you should arrange that both X and Y axis of the image doesn’t exceed the size of the actual “cropped” thumb, or you will finish with the white space on the bottom or in the right of the picture.

If you have any questions or suggestions, don’t hesitate to make a comment.

16 thoughts on “Image gallery that doesn’t fall apart”

  1. And what’s about the title of the picture ? Or a small description for each one ?

  2. hi, i think this is a relly neat implementation trick but, considering photography ‘rule of thirds‘, this can be a real pain for the photographer, reducing all pictures to fixed proportions can crop too much interesting details from the picture.

    ok, probably if the “client” is interested in the artistic quality of his images is probably willing to open up photoshop and crop the images on his own, but it’s not an assumption you can take for granted too easily…

    anyway, great work and thanks for sharing.


  3. Pedro: Tnx, I’m glad you like it.
    DJ Midty: Well, I didn’t think about that. The idea of this gallery was to show just pictures. It is a good idea to add a title or description below the picture and I think I will get to it soon.

  4. Marcello: I’m familiar with the rule of third and when I worked on this approach it figured out that it can be done under FF (with negative margins), but I had problems with IE (overflow:hidden didn’t work anymore).

    I know this isn’t the perfect solution, but this is meant for a large CMS driven websites. I’m planning to expand this technique to fit everyones need.

  5. Emanuel, there is a much simpler way to do this, without the need for those extra DIVs, while preserving the overflow:hidden functionality. Move the styles of .image directly to your A-tags. You can add a background color to the links as well as a padding, to achieve the double-border effect. In fact, I was working on a tutorial earlier today which did exactly this. If you’re interested, I will let you know when it’s up.

  6. Hi Jerome, thanks for the comment.

    Yes, you could use the A tag instead of the second DIV, but my idea was to create a image gallery that will work without the links. So, I think it is OK to use the link to style the image, but only if you have links in there.

    And let us know when you create the tutorial :)

  7. Hi Emmanuel.

    Good article. I wanted to share with you another technique that we use here in the office when developing a gallery for clients.

    We use a combination of width resizing and CSS backgrounds to load our images on the page.

    For instance,

    div.float {
         float: left;
         width: 120px; 
         height: 90px;
         margin: 0 .5em .5em 0;
         border: 1px solid #CCC; 

    Then, in our page, we would use:

    <div class="float" style="background: url(test.jpg) 50% 50% no-repeat;">
         <a href="#" title="Title For Our Image"><img src="blank.gif" alt="Our Alternate Text" width="120" height="90"></a>

    Typcially, we will use a resize script to size each image to our width of 120pixels, and then center the image in the background of the div. This handles both cropping and eliminates the hassle of dealing with “overflow” issues.

    In addition, because background images load last, this allows the rest of the page to finish loading before the thumbnails start appearing on the page.

    We still have an img tag for alt text purposes, our link contains a title for our image. In cases where they are just thumbnails with no link, the title attribute is moved to our transparent .gif image.

    You can, of course, get a little more creative, such as adding triple borders without adding any extra markup. For instance:

    div.float, div.float a { float: left; }
    div.float { 
         margin: 0 .5em .5em 0; 
         border: 1px solid #000; 
    div.float a { 
         display: block;
         width: 122px;
         height: 92px;
         border: 4px solid #CCC;
    div.float img {
         border: 1px solid #333;

    It works in IE 6, Firefox, Opera, and Safari (as far as I know) The only consideration is to remember to add the internal image’s border width to the overall width / height of the block element containing the background image.

    Cons for this method are that background images won’t print (at least not by default).

    Have a great weekend!

  8. Hi David. I like your method and I was considering using background images instead of the images, but it just doesn’t meet my needs because of the printing problem.

    Obviously, they are better to control and you have no need to use overflow, but in my opinion the printing issue is a problem. And there is a problem where somebody is surfing with the background images turned off – but that is the issue with all background images :(.

    Thanks for sharing this insight on image galleries with us :)

  9. Hi Emanuel.

    Yes, the printing does present a problem…though I will say that in-practice, at least in our situations, I don’t believe we’ve ever had an issue where anyone complained about not being able to print the thumbnails. Obviously, we use standard images for the enlarged versions, which are very commonly printed.

    The other drawback to the method I explained above would be increased HTTP requests, essentially two for each image, since a call would have to be made to the blank image, as well as the background image. We’ve seen little performance impact with this, however, since the 49 bytes that compose the transparent image cache very nicely. :)

    It is, as you said, all a matter of what suits the clients needs. :)


  10. Hi Nikola.
    I used the second (empty) DIV to create the 1px border around the image (the empty div is 2px smaller – 78x78px). If you don’t want to create a border effect than you could remove this DIV and use overflow:hidden on the first DIV instead.

  11. Is there anyway to control from where the cropping starts, other than from the top left corner?

  12. Xavio: You can start the cropping wherever you like. You should change the positions in .image div { ... }. If you want to use right-bottom simply use this CSS rules .image div { right:1px; bottom:1px }.

Leave a Reply

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