Resize Image in Blog Posts To Fit Column Width Using CSS

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.