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.

One thought on “Resize Image in Blog Posts To Fit Column Width Using CSS”

  1. 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.

Leave a Reply

Your email address will not be published. Required fields are marked *