Add a Maximum Width To Your Images

One thing I find annoying about the WordPress “Add New Post” page is the images part. You know, if you have a content area of 500px width and you will add an image of 800px width, your whole layout gets screwed up.

Of course, there are a few solutions available to fix that little problem.

Default Size via Media settings

First of all, you can change the default size of “large” images. You can later (when you upload your image) choose which size you would like to give your image (thumbnail/medium/large) and if you would choose large, you image will have the maximal width.

To do this, go to wp-admin > settings > Media and change your default sizes.

Max-Width

However, this is not the ultimate solution. You might have a blog with guest posters, who don’t know about all those options, so they might publish your images with a too large width. Or you simply don’t want to worry about those images anymore.

Because the easiest option, adding max-width to your img tags, is not supported by IE6, we have to go an other way. We can use this IE-fix to add a maximum width to your images in your content area. Thank you Cameron.

{code type=css}
#content-area img {
width: expression(document.body.clientWidth < 502? “500px” : document.body.clientWidth > 1202? “1200px” : “auto”);
}
{/code}

Note: replace #content-area with the Class or ID your content area has.