Blogspot Image exceed the body

How to automatically adjust image in post body ?

The ilustration of a web page with an image exceed the body post to the side bar area.
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
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
Blogger Template Designer


Go to Advance Setting and Add CSS code.
Advance Setting, Add CSS to customize the blogger style
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.

the CSS Code to adjust image size in Post Body
CSS Code to adjust image size in Post Body

Submit your email below to get the lattest article update:

0 Response to "Blogspot Image exceed the body"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel