Are the images in your main container is wider than the width of the main container? If it’s so then you will find your blog layout clumsy or misaligned.I have seen few using image resizer tool to resize images, but it’s time consuming. You can even use JavaScript for resizing images, but using JavaScript will increase blog loading time. In order to avoid using JavaScript or image resizing tool, in this post I have explained how to resize images in your blog main container with simple CSS codes.
You can implement image resizing hack in PHP based wordpress or in blogger blogs too. In this tutorial i will explain how to add this hack to both blogger as well as wordpress.
Before explaining the original hack , I would like to tell what most of the blogger might be doing to re-size their images while writing posts. Mostly they will use style tags to mention the width and height of the image.
<img src=”image link” style='height:260px width:560px'>
But when you are having a number of images in your posts , then it becomes difficult to mention the image size and width in each and every image. And also if you change the template which contains different width , then you need to edit the size and width in all images.
But when you are having a number of images in your posts , then it becomes difficult to mention the image size and width in each and every image. And also if you change the template which contains different width , then you need to edit the size and width in all images.
In order to get rid off those head-aches , just follow these simple steps to resize images in your blog. Even if you have declared different image size and width in that image code , this code will overwrite those tags and will change the width and size you mentioned in the style sheet.
First go to layout section of your blogger blog. Then navigate to EDIT HTML section. Now search for this tag there.
]]></b:skin>
]]></b:skin>
Now add the following code above that code line.
.post img { float:center; min-width:560px; max-width:560px; max-height:260px; min-height:260px; padding : 10px; line-height : 2em; margin: 0 auto 10px auto; clear: both; }
.post img { float:center; min-width:560px; max-width:560px; max-height:260px; min-height:260px; padding : 10px; line-height : 2em; margin: 0 auto 10px auto; clear: both; }
In that above code , edit the max-height and min-width tags to suit your main container width and height.
