为什么内容图片的最大宽度:97.5%?

时间:2012-01-09 作者:lepardman

我们发现max-width:97.5% 而不是100% 在常见的主题中,如“二十一”吗?

1 个回复
最合适的回答,由SO网友:Geert 整理而成

由于TwentyEleven主题还包括一些默认填充和(流体)图像的边框(请参见下面的CSS),因此100%的宽度会将图像推到其容器宽度之外。这是因为box model 作品:边框和填充添加到宽度/高度。

img[class*="align"], img[class*="wp-image-"], #content .gallery .gallery-icon img {
    border: 1px solid #DDDDDD;
    padding: 6px;
}
在这种情况下,更好的解决方案是更改图像的长方体模型计算。一个名为box-sizing 可用于此。

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;
}
注:box-sizing does not work in Internet Explorer 7 or lower.

结束