由于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.