22 Feb 2012

How to Make All Images the Same Size Automatically on Blogger

Yet another post inspired by a conversation on Twitter. It seems some themes stretch the dimensions of an image making it look out of proportion. So I've devised a solution. This fix will make sure all your post images are the same width so it can also improve the look of your blog. It automatically works out the height so don't worry, you won't end up with images that look distorted. It retains the original images proportions.

To apply this fix. Navigate to Dashboard>Template>Customise>Advanced>Add CSS.

Copy the following code and place it in the box.

 
 
.post-body img {
width: 400px;
height: auto;
}
 
.post table.tr-caption-container img {
width: 400px;
height: auto;
}

Replace 400 with the desired default width you'd like for your photos. Then press the 'apply to blog' button and all your images will change to the desired size. Easy peasy! If you have any problems just comment, tweet me or drop me an email!

4 comments:

  1. doesnt necessarily work for those images in tables. gave me a massive headache cuz those in tables are within a class (tables get an automated class and tables are automatically created when you click on 'add caption' on them)

    ReplyDelete
  2. it should work for the majority though as most people don't use tables :)

    ReplyDelete
  3. Thank you for this. It worked nicely and I feel that my blog posts look a lot neater now. :)

    ReplyDelete
  4. Pardon the stupid question here but will this change past posts or only the future ones? Also, since I have you here, one more little (and stupid) question, what is 400px equal to? And do you suggest a size for pictures?

    ReplyDelete