twitter-bootstrap - 带有边框的图像无法使用引导程序正确调整大小

Question

我使用 boostrap 来创建一个响应式网站，并且遇到了包含边框的图像的问题。

当我的页面被最大化时，图像很好，但是如果我开始减小列的宽度，列会按预期调整大小，但是图像的一部分对于列来说太大并且被剪裁了。剪裁的数量等于边框的宽度。引导程序和带边框调整大小的图像是否存在问题。

这是我的代码

<div class="container">
    <div class="row rowTopMargin">
        <div class="span6">
            <img class="ExampleTiles" src="img/FootPrints.jpg" alt="FootPrints carbon calculator" title="FootPrints Carbon Calculator" />
        </div>
        <div class="span6">
            <img class="ExampleTiles" src="img/EliseDesigns.jpg" alt="Elise Designs" title="Elise Designs Website" />
        </div>
    </div>
    <div class="row rowTopMargin rowBottomMargin">
        <div class="span6">
            <img class="ExampleTiles" src="img/TreatMe.jpg" alt="Treat Me At Home" title="Treat Me At Home Website" />
        </div>
        <div class="span6">
            <img class="ExampleTiles" src="img/TreatMe.jpg" alt="Treat Me At Home" title="Treat Me At Home Website" />
        </div>
    </div>
</div>

这是正确的边界

这是剪裁的边框。

Answer 1

好的，所以问题似乎出在 img 的 100% 宽度上。环境

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;

移动框内边框并修复100%问题