Have you ever added an image to your blog post to find that the width of the image exceeds the width of the column of the page? Here’s a simple fix you can add to your theme’s style sheet to solve this problem. The fix below assumes that you have a class for your blog post entries called “.entry”. This class may be called something different depending on the preference of the theme developer.
.entry img {
max-width: 500px;
height: auto;
}
The max-width: is the maximum width the image can be within the .entry class. In this example the maximum width for an image is 500 pixels. We set the height: auto so the height of the image is auto adjusted to maintain the aspect ratio. Images that are smaller than the max-width will not be resized.
Note that this will not work for Internet Explorer 6 or older.
Here’s some code that WILL work in IE6. It prevents a messed up blog layout whenever a larger image is uploaded, adjusting the width to fit the column and adjusting the height accordingly so your image won’t appear distorted:
p img {
padding: 0;
max-width: 100%;
height: auto;
}
#header, #content, #footer, .widget {
overflow: hidden;
}
Thanks to Andy Skelton and Lorelle. I used this code on winkwink.nl and it works perfectly.