Xtremax - Web Design

24 Mar, 2009

CSS + DIV crop image of different size

Posted by: Mr Cheetah In: test category

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:

image

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.

Bookmark and Share

2 Responses to "CSS + DIV crop image of different size"

1 | Mr Otter

March 25th, 2009 at 12:32 am

Avatar

And with JQuery, you can further refine it so that it is applicable to all images with a certain class, i.e.

$(”.border”).wrap(”<div class='promo-crop-bg><div class='promo-crop'> </div></div>'”)

will do the trick to all images with the class set to .border!

2 | Mr Otter

March 25th, 2009 at 12:33 am

Avatar

hey, also shouldn't this be in the Joomla category instead of test category?

It will be easier for all of us to refer to in the future…

Comment Form

Xtremax Web Design Portfolio

    Opera Estate Primary SchoolNational Association of Travel Agents SingaporeFUMIYAMA CORPORATIONEngineering Education PortalBOON HI-TECH SUPERSTORESingapore Tourism Board

About Xtremax

This is all about a group of hard-core web developers who go about rambling about their daily efforts to make the internet world a better and more accessible place.