Why max-width:97.5% on content images?
Is there a specific reason why we find max-width:97.5%
instead of 100%
in common themes such as Twenty Eleven?
Topic theme-twenty-eleven css theme-development Wordpress
Category Web
Is there a specific reason why we find max-width:97.5%
instead of 100%
in common themes such as Twenty Eleven?
Topic theme-twenty-eleven css theme-development Wordpress
Category Web
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.
Geeks Mental is a community that publishes articles and tutorials about Web, Android, Data Science, new techniques and Linux security.