How to Make Images Auto Resize to Fit Blog Post Area / How to Resize All Images Automatically in Blogger

From time to time people send us emails asking a very common question, does there is any way to resize all the images of their blogger blog? Sometimes images of large magnitude flow out of the content this not only disappoint your readers, but also affect your online reputations.  Blogger provides basic options for resizing images, but this not a practical approach and does not fit the blogs designs well.  Fortunately, a straightforward CSS tweak makes it possible to automatically modify each and every image on your site. In this article, we will show you How to Resize All Images in Blogger?

Resizing pictures one-by-one manually is acceptable, but what you would do, if your site has thousands of photos and screenshots. Will you still edit them manually? Even if you decided to do so it would take months or even more than that. Therefore, it is essential to resize them manually through a straightforward CSS coding. Through this approach, you can also revert the size of images back to their original size.

The First thing you need to do is to go to Blogger.com >> your site >> Template >> Edit HTML. Now within the new Blogger HTML Editor search for the ]]></b:skin> tag and just above it paste the following CSS coding. (Quick Tip: If you are unable to find the skin tag, then first click anywhere on the HTML Editor and Press CTRL+F to operate the built in search option connected to the HTML Editor).

.post-body img {
width: 500px!important;
height: auto!important; }

Now change the values of Width and height, according to your needs. You can even add a border to your images through (border: 1px solid #d2d2d2) a modest border CSS command. After customizing, press the “Save Template” button and that’s all.

We hope this technique would help you in resizing your old images. If we have missed something or you know a much simpler way of tackling this problem then, the below comment section is all yours.