title: Make two column responsive images of same size
body: <p>I have differently sized images, but want to make them look equal by width and height on the page. What I did:</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="col-lg-6"&gt;
    &lt;img src = "assets/img/101.jpg" alt="Null" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>#images img {
    width: 100%;
    padding-bottom: 4em;
    position: center;
  }
  </code></pre>
  
  <p>But they look like that:</p>
  
  <p><img src="https://i.stack.imgur.com/57JyY.png" alt="screenshot"></p>
  
  <p>They have different height. 
  How to make it equal?
  Probably I need to crop them by height and center without changing the width. Is it possible?</p>
  
  <h3>Explanation from the comments</h3>
  
  <p>I have suggested that it will probably be nice to crop them, not resize. Center and crop to the size of smaller ones.</p>