How Auto Adjust Images Size In Blogger Posts

How Auto Adjust Images Size In Blogger Posts,yes friends many of us would be daily posting some images in there blogger posts or would have photo blogs and would be tired of giving the width and height to there post images again and again to adjust and look good in there blogs.And dont they think when they will switch to new template the width and height assigned to images in post can create problems for them.And many of blogs would be facing problems if they post images with width longer than post section and image would overlap the sidebar and if not overlapping then only part of the image in post section will be visible rest part hidden.So i will be telling you on how to auto adjust images size in blogger posts to suit your blog needs.

Now Please look at the pictures carefully to know what i am exactly talking about.

Suppose you have post section of width 500px and you post a picture of width 800px in the post without defining any width and height to it.Note if you uploading through blogger editor it automatically define width and height to image so will never face error in that.

The image would appear in post like below two methods.

1) As image width was 800px,Image width get shortened and will show up in post upto 500 px and rest 300px will be hidden.



2) Full Image is shown but overlap the sidebar.



But the proper way the image should be shown in blogger post should be like below.



So to make it correct i am making you learn this css property for your blog,if you are facing any of these problems.

As say you have an blog and want to show images of width equal to post section i.e you have post section of width 500px and you want to show images to autoadjust to that size in your post.For doing that just go to blogger Layout >> Edit/Html and add the below codes before ]]></b:skin> tag :-

.post img {
max-width:500px;
max-height:500px;
min-width:200px;
min-height:200px;

border: none;
text-align: center;
padding : 10px;
clear: both;
}

Just adjust the properties min-width,min-height and max-width and max-height.As after using above codes now in your post the image width and height will never get less than 200px and not more than 500px.So image size will always lie between 200-500px.If image size is less than 200px it will auto adjust to 200px and if more than 500px it will autoadjust to 500px.

Now if you wanna use all images in your posts of same height and width i.e mostly used by all photo blogs to show of all the images of same sizes.You can use below codes.

.post img {
width:500px;
height:400px;
padding:10px;
}

Now all the images of any size in post will appear to auto adjust to size of width 500px and height 400px.

**Note:- If not working properly , there might be image property defined in your template,just find for it and check it.Find for .post img tag to check it.

Anshul