title: CSS how do you stretch to fit and maintain the aspect ratio?
body: <p>I have the following css:</p>
  
  <pre><code>.mod.left {
  background-image: url("http://www.myimage.jpg");
  display: block;
  height: 160px;
  overflow: hidden;
  width: 175px;
  }
  </code></pre>
  
  <p>That corresponds to this HTML:</p>
  
  <pre><code>&lt;div class="mod left"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>It results in this mess:</p>
  
  <p><img src="https://i.stack.imgur.com/DsHmq.png" alt="enter image description here"></p>
  
  <p>if I use the css3 background-size: 175px 160px; The aspect ratio is really messed up resulting in a mess like this:</p>
  
  <p><img src="https://i.stack.imgur.com/9btvo.png" alt="enter image description here"></p>
  
  <p>Is there a way to stretch an image to fit a div? But in a way in which the aspect ratio is maintained? I want an auto crop. </p>