Auto Sizing Photos to Fit Post Area in Blogger

One question I am asked often is from Blogger users wondering how to make their photos fit the width of their post area. If you’ve been using Blogger for a little while, you are no stranger to the image size options once you upload your photos. They currently offer Small, Medium, Large, Extra Large and Original. Whichever option you choose determines how your photo will be displayed. If you are not yet familiar with these options, try adding an image to your post and then click on that photo in the editor. You will then see the image size options below the photo.

Depending on the width of your content area, the Extra Large size tends to work well, but what if you want it just a bit larger, or just a bit smaller? The standard Extra Large photo size is 640px wide. You can adjust this easily with a little CSS magic.

First, stop choosing image sizes and stick with the Original photo size. The Original size does not compress or resize your images, so I wouldn’t recommend uploading HUGE photos straight from your digital camera without resizing them manually first. Otherwise you’re going to be uploading rather large file sizes which drastically slows down your blog’s loading time. (Photos from a DSLR are usually about 1-4MB in size… each!)

Generally I resize all of my photos to 700px wide during my editing sessions. 700px is a nice size because you can shrink it a little bit in Blogger without losing quality, and the file size is not too large. If your post area is larger than 700px, resize your photos accordingly. However, think about the future of your blog. What if one day you might want even larger photos shown at about 800px wide? Resizing your photos larger than your post area can prove to make life easier down the line. You can’t upscale your photos later without sacrificing quality, but you can always shrink them.
You can use any photo editing program to scale and compress your photos. I strongly recommend getting your hands on Photoshop because it will definitely prove its value throughout your blogging career. If you aren’t into editing your photos on your computer, try setting your camera settings to the “small” image size when snapping your pictures. I would only suggest this as a last resort though.
Once you’ve got your photos resized, add them to your post. Choose the Original size option. Now, obviously if your photos are larger than your post area, they are going to poke out of bounds, so let’s fix that and make them fit exactly.
In Blogger, go to Template > Customize. In the Template Editor choose Advanced and then CSS. Here is where you will add the following CSS code. Remember to change the value with the width of your actual post area. The width should be smaller than your actual photo, not larger.


.post-body img {
max-width:660px;
max-height:auto;
}


What’s great about doing it this way? Say you want to change your blog design around a little bit in the future and your post area width changes a little. Instead of changing each image on past posts, all you would need to do is update the CSS code with the new image width and everything will fit properly… past posts and new ones.
Let’s add to that a little to get rid of the default border and shadow around your photos:

.post-body img {
max-width:660px;
max-height:auto;
box-shadow:none;
border:none;
}

Those two lines get rid of the outlines and give your posts a much cleaner look.
I hope this post helped you! Comments and feedback are always welcome below!