Skip to main content

Posts

Showing posts from January, 2009

"Cropped" images via CSS only

Had this problem on a site recently. There was an area where a variety of images could show up, dynamically pulled from a datbase. The images were of a fair variety of dimensions - all the same general size, but no exactly the same. The variety of dimensions made the area look bad - and simply forcing them to the same dimensions led to distorted looking images. At the same time it wasn't feasible to resize or crop them either automatically or manually. The solution I came up with was to simulate a cropping effect. I came up with a good "ideal" dimension. Say it's 100x100. The images themselves are in a grid of table cells. First, I fixed the table cell size at 100x100. Then, rather than placing the image inside the table cell as would be standard, I set it as the background for the table cell, and just put a "&bsp;" in the table cell (so it's not empty). This makes it so that the table cell displays the image as a background - any parts of the image