title: Scaling, centering and cropping image with object-fit and object-position
body: <p>I would like to take an aleatory image and having it scale up / down to use the whole space of the parent <code>div</code>, while maintaining its original proportions. I expect the image to be cropped (it's ok, as long it's centered both vertically and horizontally).</p>
  
  <p>I've tried this code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container" style="width: 800px"&gt;
    &lt;div class="row"&gt;
      &lt;div style="
            height:340px; 
            width: 100%; 
            overflow: hidden;
            border: 3px solid red;
            "&gt;
        &lt;img src="http://via.placeholder.com/500x500" style="
              object-position: center;
              object-fit: cover;
              "&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>And here's the result: 
  <a href="https://i.stack.imgur.com/WKa30.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/WKa30.jpg" alt="Screenshot of result of original code. A div with a red outline as a photo of the Rolling Stones. The photo is aligned to the left and does not fill the div width wise. The background image can be seen through the div where the image does not fill it."></a></p>
  
  <p>Why isn't it scaling up, centering and cropping the image?</p>