Why max-width:97.5% on content images?

2 Views

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

Post Views: 2

Related posts

Leave a Reply

1 comment

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