How to Resize Blog Photos Using CSS
Blogs look so much better when photos are uniform in size and are proportional to the width of the content column of the blog. It looks funny if you’ve got some photos that are tiny and some that are giant, when portrait and landscape photos aren’t the same width, or when the text on a blog extends far beyond the photos.

Megan used to do a lot of calculations to properly resize photos that she was displaying. We use Flickr to host our images, and Flickr only has specific sizes available when you’re copying the HTML code to paste into your HTML blog editor. Our blog width is currently 525 pixels, and we didn’t want to have photos that were 500 px wide (which was too small) or 640 px wide (which was too large).

So she’d manually change the width of the photos in the HTML, which went something like this: If the photo sizes on Flickr are width=”640″ and height=”451″, and the desired size is width=”525″, she would have to divide “525″ by “640″ and then multiply the output “.82″ by the height “451″ to get “370″, the correct pixel height for the photo. Yay for math, but that’s a pain to do all of the time. So I added a little CSS code to our blog to make sure she never has to do that again:


.resize { width: 100%; height: auto; }

This is referred to as a CSS “class”. Anytime you apply this class to an HTML element, that element will have these properties. We use class on all of the photos in our posts. This code will cause the browser to do the calculations for you, all you have to do is add the class to the img tag you’re using. Instead of displaying the height and width in the image tag, you paste class=”resize” instead.

How to install this:

If you’re on Blogger, just go to the template section, click “modify the template options”, and you’ll see an “advanced” section at the very bottom. Just paste the code in that section and you’ll then be able to use the resize class on your photos.

If you’re on WordPress, you can add it to any of the css files. In the admin section of WordPress, choose the “Appearance” section, click the edit option. On the far right, you’ll see a list of files… look for “Style.css” and add the snippet of code somewhere in there and save. After doing this you’ll be able to use the resize class on your photos.

After you’ve installed this CSS to your blog, resizing photos will be easy as pie. Just paste class=”resize” over the width and height of your photos in the HTML of the image tag!

For example:
<img src="mySuperAwesomeImage.jpg" width="640" class="451" />
Will now be:
<img src="mySuperAwesomeImage.jpg" class="resize" />

So now this image with a super awesome name is going to automatically be resized to be the biggest possible size within the post column. It will take up 100% of the width. The height of the image is auto, so that the aspect ratio is maintained (so the photo doesn’t look weird and stretched).

Good luck, and comment if you have trouble.

P.S. If in the future, you decide you don’t want the photos to be 100%, you can make the change to the CSS by putting in a different percentage (90% or 50%, for example), and all photos that have this class will automatically be updated with the new size. You can also do various things to the photos with this class, like give them borders, padding, margin, etc. Have Fun!