Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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

share|improve this question

1 Answer 1

up vote 4 down vote accepted

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.

share|improve this answer
    
Thank you Geert! :) Gonna check out box-sizing at once –  lepardman Jan 9 '12 at 15:07

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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