HackingUniversity - Hacks . Tricks . How-To's

07 June 2012

How to Automatically Make Images Fit your Blog’s Width

blogger-logoImages are the key points of any post or articles you update regularly in your blog, they are the one main thing which makes your blog much more attractive. But sometimes giving makeover to your blog can manipulate your blogs width and hence all your image @ that point might have been bigger in size and can come out of the borders, by using a simple CSS Hack you can make all the images in your blog fit your blogs width.

Making Images Fit in Blogger Blogs

If you are on blogger you can simply add below CSS code right above your ]]></b:skin> tag by logging in your template designer.

img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}

Making Images Fit in Wordpress Blogs

If you are on Wordpress blogs than you have to add the same CSS given above but just add it to your stylesheet and that will be it save your settings and try refreshing your blog and see if the images that crossed the border and center and taken into account or not.

Well this hack is working perfectly as I have applied this hack on my blog and as you might see all the images are perfectly 100% of width, so try it out and if you come across any problems than do comment.