带有边框的图像没有使用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％问题