Restrict The Size Of Images In WordPress

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. 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 an unexperienced person can do it.

1. Go into the Apperance->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%; height: auto; }

   img { max-width: 100%; height: auto; }

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%;
 height: auto;
}

But the ID might be a bit complicated to figure out if you do not have any HTML experience. If that is the case, just leave a comment and I might help you.