title: Image No Stretch or crop
body: <p>My question is simple. Let's say I have two rectangular images. The first is 200px wide and 100px tall, and the second is 100px wide and 200px tall.</p>
  
  <p>I want to display the images with a constant width/height, e.g. 150px by 150px without stretching the images to fit:</p>
  
  <p><img src="https://i.stack.imgur.com/SdVk2.png" alt="enter image description here"></p>
  
  <p>I don't mind having whitespace/padding around the images. The problem is that the images could be of any width and height, and I want to limit them to a square box without stretching them.</p>
  
  <p>The following CSS stretches the images to fit to 150px by 150px:</p>
  
  <pre><code>img {
      width: 150px;
      height: 150px;
  }
  </code></pre>
  
  <p>The most preferable solution is CSS, even if I need a little more markup. JS/jQuery is okay as well though.</p>