Cropping images with CSS
I had to build a page on a tight deadline recently. The comp called for several rows of square, 100 by 100 pixel thumbnail images. The problem is we have a bunch of consistent width, variable height images.
Our images:
Here’s the comp:
I started looking at Javascript- and PHP-based cropping tools and found them too complicated to figure out and build the page on time. I decided to use a little CSS instead.
Since our page is generated dynamically and pulls randomly from set of images, I had to break a rule and resort to using inline CSS in my HTML. If you don’t have the same requirement, you can replace my solution with unique classes for each item.
Each photo is set as a background image, inside a 100 pixel square box, with the position set to center.
I used a div for this layout, due to some other requirements for text and borders, but you can easily use a UL instead. There’s text inside the DIV, but I hide that with CSS since it is not required in the screen view.
Here’s the HTML:
<div class="thumb">
<a style="background:url(images/image01.jpg) no-repeat center;" href="#">some title</a>
</div>
And the CSS:
.thumb { margin: 4px; display: block; float: left; background-color:#fff; padding: 10px; }
.thumb a { display: block; width: 100px; height: 100px; text-indent: -999em; text-decoration: none; }
That’s pretty much it. Download the example files, including HTML, CSS and example images.
I’d love to see alternative solutions!
Posted by corey brown on August 9th, 2007
Filed in random thoughts, web |
August 10th, 2007 at 12:16 am
Now that’s using your brain! I don’t have any alternate solutions, so I’ll just have to steal this. ;-)
August 10th, 2007 at 12:19 am
haha. go for it.
September 11th, 2007 at 6:08 am
I used this very technique on a site that never went live, and apart from the inline css it’s a pretty good solution. I only found this four years later when I had to do the same thing again and couldn’t remember what I did.
Thank you!
September 11th, 2007 at 6:33 am
p.s. I used this code for the background position:
background: transparent url(’$thumb’) 66% 33% no-repeat;
I’m no artist but maybe it’s something to do with the golden section; it seems to have the highest proportion of ‘on-target’ cropping.
February 22nd, 2008 at 11:22 am
Thanx alot, you were very helpfull for me , i use it in php file so you can read image from db , and god it work , thanx
February 28th, 2008 at 2:19 am
This is perfect. Thank you so much.