1 trick to make blogger images full width automatically?

Are you also frustrated by resizing the blogger blogs images every time to make sure that it fits your blog post in full width? Here I am going to show you how you can make the images in your blog full width to fit the post automatically without doing a trial and error method every time in a very simple trick.

What is Blogger?

Blogger is a free platform from Google which gives you a free .blogspot.com domain and completely free hosting from Google itself so you can already understand How cool is that. But in terms of functionality blogger is no match for other content management systems like WordPress but it is updating and will reach the level of WordPress in the coming times.

Blogger offers various tools for resizing post images easily. I will show you the trick for automatic resizing of post images in a second but first I would like to show you how to use the inbuilt already available tools in the blogger for uploading and resizing your images for those who don’t know?

Read also:-How to remove Footer credits and Encrypted Javascript in Blogger templates?2 Free Best tool.

How to use Blogger tools for resizing image manually?

You can set the photo size too small, medium, large, x-large, or to its original size. You can also set the justification to left, center, or right. I would personally recommend you to center your images and use the x-large setting (if you don’t use the trick below to automatically resize them) so your photos can be seen in their original form.

To use the Blogger resizing options, simply create a new post, add a photo, and then click on your uploaded photo to open the sizing and positioning options.

The only drawback to using this option is that the x-large size sizes images to 640px, which means if you have a post area that is wider than 640px, the photo will still look a little small. That is where this CSS trick comes in action.

How to make blogger images full width automatically?

1.Resize your image in the editor.

A most important step is to resize the images in the editor with the inbuilt blogger tools even if you don’t want to use the automatic resizing trick. I would suggest you don’t upload any images in the original size or at least select any of the sizing options in the blogger tools like large, X-large, etc. The reason for not using the original size is that it will be a heavier image and it will slow down your website very very much so keep that in mind.(Not recommended)

As per some research from my side, I have found that most of the blogs have a post area of 600px to 750px approx so we are going to resize your photos to 800px wide so that it will work on most of your blogger templates.

You will need to make your image size slightly larger than the post width because it is easier to shrink a large image to fit the area and not lose quality but it is much harder to enlarge a small image because it will decrease in quality and also the image will be pixelated too which would greatly impact your user experience.

So I would recommend you keep your image size to be around 800px wide to efficiently use it with the tutorial.

2.Add a little CSS to your blog

Now that you have done the image resizing correctly, you will now need to add just a little code to your HTML, and don’t worry we will use the Theme editor feature of blogger so you do that have to brag about you not having any coding experience. It’s will be just a copy-paste job.

1. Open your Blogger dashboard and Go to the ‘theme’ and then ‘Customize’

2. Now click on Advanced then click on the drop-down list in front of body and then scroll down and click on ADD CSS.

3. Now copy and paste the script given below into that CSS area box and click the save button in the lower right corner.

Paste this code

.post-body img {
max-width: 100%;
max-height: auto;
display: block;
margin: auto;
}

It should look something like this.

Video Guide

Important Note

The above code will only change the images you have set to “Original Size.” If you want ALL of your images to be sized to the full post width regardless of the Blogger re-sizing options you have them set to, add this CSS instead:

.post-body img {
width:100%;
height:100%;
display: block;
}

---

Now save the changes by clicking the save button in the bottom right corner.

Conclusion

Now to check if it working or not, just add a photo to a post like described at the beginning of this tutorial and make sure the photo is set to “Original Size” and your photo will now nicely fill the full width of your post area once you hit “Publish”. This trick will also apply to all previously posted photos as long as the photos are set to “Original Size.” If not, then you’ll want to use the second code option mentioned above.

This is how you can make your blogger blog images full width automatically and without doing anything extra after applying this tutorial one time. I hope this article helped you and saved your time so do let me know if this worked for you in the comments below and also share this with your blogger friends so that they can also make use of this.