I remember when I first started blogging, this was one of the biggest issues I had. Some of the images in my posts where so big that it exceeded the post area. I would change and test different templates on my blog but no changes. Until one day, I finally stumped on a solution. Yesterday while I was surfing the web, I bumped into a new blog that was having same issue, the image so exceeded the post border and was disrupting the sidebar gadgets. This made me
decide to post the solution I used to automatically resize my images here.
So in this tutorial, i will show you how to automatically resize blog post images to fit inside the post area.
Now for this to work well on your blog, you will have to set the size of images you upload to “medium”. Because its easy to reduce the size of an image, but if you try to increase the image size, it will reduce the quality of the image and your post will take long to load.
Now let's get started
Step 1
Login to your blogger
Step 2
Click Theme and select “Edit HTML”
Step 3
Now inside the template code box, search for the ]]> tag and add the below code above the ]]> tag
.post-body img {
max-width: 100%;
max-height: auto;
display: block;
margin: auto;
box-shadow: none;
border: none;
padding: 0px;
}
Step 4
Save Template
Now any new post you will be creating, make sure to set the image size to medium.
