Quite often, in CMS driven websites, the thumbnail images to be shown on the listing page is very hard to be controlled to be the same size, especially for clients who do not have image processing knowledge. I discovered a easy workout which can automatically crop the images and add a nice border.
First we need to prepare the border image, the one i used is like this:
It can be any type of border image, the inner part will be used for display the cropped image.
The HTML to render it is very simple, similar to many many div based hacks, it is comprised of 2 divs, 1 inside of the other:
<div class=”promo-crop-bg”>
<div class=”promo-crop”>
<img src=”…”>
</div>
</div>
The trick is in the css:
div.promo-crop-bg {
width: 107px;
height: 95px;
background: url(../images/promo_bg.gif) top left no-repeat;
}
div.promo-crop {
width: 99px;
height: 84px;
overflow: hidden;
}
The first div, is the one renders the border, if you do not need a image border, it can be removed totally.
The 2nd div is used to crop the image. The trick is at overflow:hidden, this prevents any image that is larger than the div from displaying. Last but not least, set the div to the correct size, otherwise, it would be totally useless.
