Auto-Sizing Photos to Fit Post Area in Blogger

By: | Updated: February 21, 2021

Our website is supported by our users. We sometimes earn affiliate links when you click through the affiliate links on our website.

In the ever-growing debate between Blogger and WordPress, the jury is still out on which one is better for bloggers. While I use WordPress, many others still continue to use blogger.

We cover both on this site, and as such, 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.

How to Get Photos to Fit Post Area in Blogger

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!)

Tip: When you switch to WordPress, you can take advantage of WordPress image optimization plugins that do resize and compress images for you.

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!

by Brett Helling
Brett has been starting, growing, and monetizing websites since 2014. While in college, he began to learn about digital marketing. After graduating, he continued to build a diverse portfolio of websites while working a full time job. After years of building the portfolio on the side, he made the jump to run his websites full time.