The Taming of the Image Background

G'day, readers.

We've all encountered that frustrating moment where you have nicely sized placeholders, precise as you please, for containing images, but somehow that damned image refuses to conform to the dimensions you've specified. Images provided tend to come in all sizes, so you may end up having to personally trim or resize each image, which is a tedious task in and of itself.

But hold on - what if the dimensions for your placeholder changes? Maye you want thumbnails to appear slightly larger. Maybe there have been some layout changes and suddenly you less space to play with, than you originally allocated to that logo. What are you going to do, go through the entire process of trimming your images again?

Dear Lord, no.

Besides, if you're trimming those images, you need to make the pesky decision of which parts to trim and which parts not to trim.

Boy, that sure sounds like a lot of work.

CSS to the rescue!

Yup! There's a CSS property that's going to save you a whole lot of frustration. The background-size property. For this, we'll be discussing the cover and contain values.

background-size:cover ensures that the entire area of your placeholder is filled. This may lead to parts of your background image being cropped off. Below is a div measuring 200 pixels by 400 pixels . And its background image, which is 350 pixels by 250 pixels. background-size:cover produces the result below.

See? As much of the background image has been squeezed into the placeholder as possible, while ensuring that the entire div is covered.

background-size:contain ensures that all of the image is inside the placeholder. This may lead to parts of the placeholder being left uncovered. Below is the same div and background image. background-size:contain produces the result below.

Note that all of the image has been squeezed into the div. But because the image is in portrait while the div is in landscape, this leads to a fair bit of uncovered space.

Which one's more useful?

Well, that really depends on what you're going to use it for, yes? There are no blanket solutions. It all depends on context!

To illustrate, I'm going to use random football images. Because football is one of my many passions.

500 x 300

400 x 250

400 x 600

500 x 500

600 x 250

300 x 450

500 x 350

500 x 350

background-size:cover is better suited for a gallery of thumbnails. Because, a) you won't need all of the image to appear and b) you really want the thumbnails to be uniformly sized.

Below is a typical gallery, each thumbnail measuring 200 pixels by 150 pixels, the background-size property set to cover.

Just for contrast, I'm going to set the background-size property to contain instead, and show you the result.

Yikes, that's ugly.

Convinced yet? Moving on.

background-size:contain is better suited for a situation where you need all of the image to appear within the placeholder. For the purpose of this exercise, I'll be using the crests of some of my favorite clubs. (Yes, I do have a soft spot for Bournemouth. Don't judge me!)

200 x 287

200 x 269

200 x 334

200 x 203

216 x 250

Let's say you have a layout like this. Each thumbnail is about 100 pixels by 100 pixels. The background-size property has been set to contain.

Not too bad, eh? While all logos have differing dimensions, they've been made to confirm to a similar size.

Again, for contrast, let's try this with background-size:cover.

No. Just... no.

That's all for now. That should just about cover it. (heh heh)
T___T