title: Making all images appear with the same height in bootstrap
body: <p>I am trying to make all a row of 4 images all have the same Height size, I already tried to play around with the width and height using css but nothing seems to work, the portrait images always end up taller than the landscape ones, here's the code:</p>
  
  <pre><code>&lt;div class="container" &gt;
      &lt;div class="jumbotron" style="background: rgba(200, 54, 54, 0.0);"&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-lg-3 col-md-6 col-sm-12 col-xs-12"&gt;
                  &lt;a href="#"&gt;&lt;img class="left-block img-responsive" src="images/genimage.png" width="160" height="160" alt="" /&gt;&lt;/a&gt;
                  &lt;p style="width: 200px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; "&gt;One Random Item&lt;/p&gt;
                  &lt;p&gt;50 €&lt;/p&gt;
              &lt;/div&gt;
              &lt;div class="col-lg-3 col-md-6 col-sm-12 col-xs-12"&gt;
                  &lt;a href="#"&gt;&lt;img class="left-block img-responsive" src="images/genimage.png" width="160" height="160" alt="" /&gt;&lt;/a&gt;
                  &lt;p style="width: 200px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; "&gt;Another Random Item&lt;/p&gt;
                  &lt;p&gt;50 €&lt;/p&gt;
              &lt;/div&gt;
              &lt;div class="col-lg-3 col-md-6 col-sm-12 col-xs-12"&gt;
                  &lt;a href="#"&gt;&lt;img class="left-block img-responsive" src="images/genimage2.jpg" height="160" width="160" alt="" /&gt;&lt;/a&gt;
                  &lt;p style="width: 200px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; "&gt;Another another Random Item&lt;/p&gt;
                  &lt;p&gt;50 €&lt;/p&gt;
              &lt;/div&gt;
              &lt;div class="col-lg-3 col-md-6 col-sm-12 col-xs-12"&gt;
                  &lt;a href="#"&gt;&lt;img class="left-block img-responsive" src="images/genimage.png" width="160" height="160" alt="" /&gt;&lt;/a&gt;
                  &lt;p style="width: 200px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; "&gt;Any other Random Item Any other Random Item &lt;/p&gt;
                  &lt;p&gt;50 €&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p><strong>This is what happens:</strong></p>
  
  <p><a href="https://i.stack.imgur.com/8aGlc.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/8aGlc.jpg" alt="enter image description here"></a></p>
  
  <p><strong>This is what i want(all with the same height)</strong></p>
  
  <p><a href="https://i.stack.imgur.com/ocAL7.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/ocAL7.jpg" alt="enter image description here"></a></p>