Why max-width:97.5% on content images?

Since the TwentyEleven theme also includes some default padding and a border for (fluid) images (see CSS below), a width of 100% would push the image outside of its container’s width. This is because of how the box model works: border and padding are added to the width/height.

img[class*="align"], img[class*="wp-image-"], #content .gallery .gallery-icon img {
    border: 1px solid #DDDDDD;
    padding: 6px;
}

A better solution would be to change the box model calculation for images in this case. A CSS3 property called box-sizing is available for that.

img.size-full, img.size-large {
    height: auto;
    width: auto;
    max-width: 100%;
    -webkit-box-sizing:border-box;
       -moz-box-sizing:border-box;
            box-sizing:border-box;
}

Note: box-sizing does not work in Internet Explorer 7 or lower.

Leave a Comment