Fixed Thumbnails

A few months ago I was designing an image gallery contains thumbnails. But I saw the thumbnails were in a mess. In order to fix this distorted preview, I thought about a solution method and applied it because of I got annoyed of this. Now, I am gonna talk about this method.

Yes, we can not expect that the thumbnails should be a fixed size every time if the image gallery has a dynamic content. Because, the thumbnails will be uploaded to server resizing by uploader program (PHP etc) depending on a resize algorithm. Therefore, it is possible to see a distorted preview where are the thumbnails.

See the picture below.

Let’s see how to show the thumbnails more smoothly.

First of all, we are preparing layers with the same width and height values.

.thumbnail-outer {
   border: 1px solid #ccc;
   float: left;
   width: 106px;
   height: 81px;
   margin-right: 3px;
}

The above CSS code will provide us the constant area we need firstly. Then, we set the content area style of the layer. But, the content area must be same width and height values.

.thumbnail-inner {
   width: 100px;
   height: 75px;
   margin: 3px auto;
   background-position: center;
   background-repeat: no-repeat;
}

The last thing we need to do is to add these thumbnails dynamically to the content area as they are already dynamic.

<div class="thumbnail-outer">
   <div class="thumbnail-inner" style="background-image:url(tulip.jpg);">
      &nbsp;
   </div>
</div>

After all these actions, the thumbnails can be displayed as fixed and more smoothly as follows now.

That is all!
See you next article…

Demo Page

Categories: CSS