Karol Krizka

I embed full size images in my blog posts from time to time, which can lead to a big problem: the image is sometimes bigger than the space allowed for the post. This means that the image will overflow and cover my sidebar navigation. A solution is to manually resize the image before I publish the post, but that can get quite tedious. So I have come up with a simple solution, that will do the resizing automatically and will work with any modern browser. It requires you to edit your template, but the modification is very simple. Just in case though, I included a step-by-step guide, so even the unexperienced person can do it.

1. Go into the Presentation->Theme Editor page of your WordPress panel
2. On the right side, you should see a list of files belonging to your current theme. Click on the “Stylesheet” file.
3. Insert the following lines of code to the top:
   img {
max-width: 100%;
}
4. Click the “Update File” button on the bottom. This will save your changes. You are done

Simple, eh? This should work with most themes, but there are certain ones that this might fail with. The modification restricts the size of all images on the blog to the size of the container they are in. A better solution is to prefix the img code with the ID of the container that holds your posts. For example, I would do:
#content img {
max-width: 100%;
}
But the ID might be a bit complicated to figure out if you do not have any HTML experience. If that is the case, then I am willing to help you out. I have a free web development advice offer, and such questions definitely fall in it’s range. Just drop me an email, and I will get back to you as soon as possible.