by Kyle Weems 24.October 2007 09:32
Ever since some maverick photographer in the 1920's decided to snap a picture with his camera tilted to its side, publishers and editors have had the conundrum of trying to fit images into spaces that weren't meant to hold ones with their dimensions. In many cases, with print and web media, the aforementioned overworked editor could simply rearrange his layout around the renegade, non-conformist image to accommodate its odd dimensions. Or, wielding a knife or image editing software, they can crop away until the rebel picture now meets the standards society is forcing upon it.
In the case of some websites, sometimes the design doesn't allow for that. For example, blogs with Flickr feeds or real estate sites showing thumbnails of house listings have their images supplied via a feed, and have no control on the size of the images being supplied. These images often have to fit in tidy boxes incorporated into other page elements that may not have any extra space horizontally, or vertically, for them. In some cases both dimensions are limited.
Even the most inexperienced of CSS-aware developers can rapidly arrive at a simple solution. By using the height and width properties, you can squeeze any image into any box. However, if the image's dimensions don't match the box's dimensions, you can often get an unsightly picture with abnormally wide people or tall poodles.
So how can you both have your cake and eat it too? Simple, buy two cakes. Ok, that has no relevance on what I'm going to suggest. But bad metaphors aside, you can instead look at an often unsung CSS hero: the overflow property.
First, in your HTML wrap the image up in a span tag (make sure to give it a class or ID to work with). Then, in your CSS layout file, give the span the width and height properties that match the limit you want the photo to have. Finally, give the span overflow: hidden. This means that anything inside it that doesn't fit the box's size will disappear past the edges. You'll probably want to still apply either a height or width property on the image itself, which will force one dimension to scale down to what you desire, and the span will cut off any excess image width or height that bleeds out of the box. In the case of images with really extreme height to width (or vice versa) ratios, the image might not completely fill the box. A good way to fix this is to give the span a background color that fits the overall theme and make sure the image has margin: 0 auto (or something similar if you want to center vertically) so it will center itself if it's too small.
At last, your images will fit inside their apportioned place without looking skewed or bleeding into the rest of the design. Note that this solution is best for thumbnails or other cases where you don't mind a small portion of the image potentially not showing. In cases where you always need the entire photo to be 100% visible, like a news-site article's main image, you should probably instead rebuild the design to be flexible around potentially different image sizes.