Image re-sizer CSS Hack for blogger and wordpress users
05. Aug, 2009 
10 Comments
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.
Image resize hack for Blogger
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.
or
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.
Now add the following code above that code line.
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.
Image resizer for wordpress users
In order to implement image resizer hack in your wordpress blog , just follow these steps.
First go to the dashboard of your wordpress blog. Then navigate to the Appearance tab in the left sidebar. Now go to the Editor page.
In the style sheet, check for the div element used in the main content container. In most of the wordpress blogs , the div element used will be “single-entry” . Now in that style sheet page , paste the following code anywhere.
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;
}
remember to change the text in green to the div element id of your main container.
Hope This hack will be more useful when you will be having more number of images in your posts. You need not use separate style codes for each and every image. Rather by this method everything is made automatic and even you can save your blog loading time too.
Working and resizing images to best fit the low resolution monitors had always been a trivial task for me.
Hope I can make use of this tut and work on it. Thanks
It doesnt work..
THIS DOES NOT WORK, THOUGH IT WILL ENFORCE THE “MINIMUM SIZES, ETC…. IT DOES AUTOMATICALLY RESIZE MY IMAGES TO THEIR ACTUAL SIZE, FOR INSTANCE, A PIC THATS 700X466 PIXELS IS STILL DISPLAYED SMALL, I HAVE TO MANUALLY CHANGE DIMENSIONS TO GET THEM TO DISPLAY FULL SIZE…. THIS SUX, LET ME KNOW IF THERE IS A FIX!!?
my photos are all squished and don’t resize proportionally… anyone have a fix?
It does no work. It say that More than one widget was found with id: Feed1. Widget IDs should be unique. What can I do?
max-width:10px
This attribute does not work on IE5 and IE6.
perfect code
Thanks for the code. How can the width and height proportions what?
Excellent Code, it works perfectly THANKS a lot
well. can something like this be done with the embedded youtube videos? i want all of them resized from 420 width to 350. thanks!