How to Image^2

That’s right — this article is about using CSS to square your images. Wasn’t that obvious from the title? 😉

Most of the time, WordPress does a pretty good job at creating square thumbnails for your images. But, if your image’s width or height is smaller than the thumbnail, then WordPress won’t actually resize or crop the image. Consequently, when you ask WordPress for a copy of your image’s “square” thumbnail, it ends up looking something like this:

2011-12-21 20.24.32

Eek — that’s definitely not a square! Fortunately, we can fix this pretty easily. We’ll start w/ the following HTML:

As you can see, it’s just 2 elements. The outer div will be responsible for cropping and resizing the inner img. Now, let’s sprinkle on some CSS to make this happen (don’t worry — most of the CSS is just comments that explain the CSS):

Alright, let’s see the fruits of our labor:

Arrrrg! It’s hideous! What the hell happened? Why is the image so huge??!!?!

Relax. By design, the outer div resizes the image to use all of the space available. So, if we want the image to be smaller, then we just need to place it inside of a container of some kind. For example:

And, the CSS for the outer container:

The result:

Yay! We did it!

2 thoughts on “How to Image^2

  1. Agreed — working w/ CSS is kinda like solving a puzzle. Once you figure out the trick(s), it’s pretty easy. But, it sure leaves you scratching your head in the meantime!

Leave a Reply

Your email address will not be published. Required fields are marked *