title: Resize image without distorting it
body: <p>Currently I am doing a very simple method of doing this with the code below.</p>
  
  <pre><code>&lt;div style="width: 100%;"&gt;
      &lt;img width="100%" height="250" src="http://i.imgur.com/lNB7QSt.jpg"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>If I remove the <code>height="250"</code> portion of the code it prints the image to be the normal quality + normal size by I want it to be limited to 250 in height and return something like this image.</p>
  
  <p><a href="https://i.stack.imgur.com/nvexY.png" rel="noreferrer"><img src="https://i.stack.imgur.com/nvexY.png" alt="enter image description here"></a></p>
  
  <p>But instead it returns something which looks like the one displayed below.</p>
  
  <p><a href="https://i.stack.imgur.com/YqK06.png" rel="noreferrer"><img src="https://i.stack.imgur.com/YqK06.png" alt="enter image description here"></a></p>