Is there a specific reason why we find max-width:97.5% instead of 100% in common themes such as Twenty Eleven?


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%;

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


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.