Blogspot Image exceed the body

How to automatically adjust image in post body ?

Blogspot Image Exceed The Body

The first problem i faced using the simple template is the image width. The image is exceed the body. We can see the illustration on the picture below.

Example of Image Exceed The Body

There are some way to solve this problem.
1. Increase the post body width and decrease the sidebar width
2. Adjust the image to get proper width
3. Use CSS to automatically adjust the image in a post.

The third way is the best way. The other first and second way will not give guarantee that the image will be fit with the post body. The third ways seems very complicated because it will involving the coding in CSS language. Please try it first, you fill find that it is very easy.

Go to the  Blogger Template Designer. It is located in Template and Customize Template. There will be window as picture below.

Blogger Template Designer

Go to Advance Setting and Add CSS code.

Advance Setting, Add CSS to customize the blogger style

Put the code to adjust the image in post body automatically to 100% width and height. Put the code below:

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

Click apply to blog. We will see the image in post body has been adjusted to width 100% with height auto.

CSS Code to adjust image size in Post Body