title: Bootstrap images not the same size
body: <p>I have a problem with Bootstrap css. I have a panels with header, body and footer. The body contains an image. Each of the images have been resized to the same 700px width and 450px height. Yet the panels end up different sizes with the footer not being aligned to each other.</p>
  
  <p>How can this be fixed?</p>
  
  <p>.cshtm code:</p>
  
  <pre><code> &lt;div class="col-md-4 col-sm-6"&gt;
          &lt;div class="panel"&gt;
              &lt;div class="panel-heading"&gt;
                  Visual Similarity Duplicate Image Finder
              &lt;/div&gt;
              &lt;div class="panel-body"&gt;
                  &lt;a href="portfolio-item.html"&gt;
                      &lt;img class="img-responsive img-blog img-hover" src="@ViewBag.AccreditationImage2" alt=""&gt;
                  &lt;/a&gt;
              &lt;/div&gt;
              &lt;div class="panel-footer"&gt;
                  &lt;p&gt;Accreditation test Progress: 10%&lt;/p&gt;
                  &lt;p&gt;Version: 5.5.0.1&lt;/p&gt;
                  &lt;p&gt;Vendor: MindGems, Inc.&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>and the ubiquitous image:
  <img src="https://i.stack.imgur.com/GzEq1.png" alt="enter image description here"></p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>It turns out the natural height of the images are indeed different even though they were all resized the same. Anyway, how can I force the images in the panel to all be the same size?</p>