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.
