title: images with borders not resizing correctly with bootstrap
body: <p>Im using boostrap to create a responsive website and have come across a problem with images that contain borders.</p>
  
  <p>When my page is maxed the images are fine but if i start reducing the width the columns resize as expected but part of the image is to big for the column and is clipped. The amount clipped equals the width of the border.  Is there a problem with bootstrap and images resizing with borders.</p>
  
  <p>Heres my code</p>
  
  <pre class="lang-HTML prettyprint-override"><code>&lt;div class="container"&gt;
      &lt;div class="row rowTopMargin"&gt;
          &lt;div class="span6"&gt;
              &lt;img class="ExampleTiles" src="img/FootPrints.jpg" alt="FootPrints carbon calculator" title="FootPrints Carbon Calculator" /&gt;
          &lt;/div&gt;
          &lt;div class="span6"&gt;
              &lt;img class="ExampleTiles" src="img/EliseDesigns.jpg" alt="Elise Designs" title="Elise Designs Website" /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row rowTopMargin rowBottomMargin"&gt;
          &lt;div class="span6"&gt;
              &lt;img class="ExampleTiles" src="img/TreatMe.jpg" alt="Treat Me At Home" title="Treat Me At Home Website" /&gt;
          &lt;/div&gt;
          &lt;div class="span6"&gt;
              &lt;img class="ExampleTiles" src="img/TreatMe.jpg" alt="Treat Me At Home" title="Treat Me At Home Website" /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is the correct border<img src="https://i.stack.imgur.com/ikm3b.jpg" alt="enter image description here"></p>
  
  <p>And here is the clipped border.  </p>
  
  <p><img src="https://i.stack.imgur.com/JIqT9.jpg" alt="enter image description here"></p>