Scaling, centering and cropping image with object-fit and object-position

Question

I would like to take an aleatory image and having it scale up / down to use the whole space of the parent div, while maintaining its original proportions. I expect the image to be cropped (it's ok, as long it's centered both vertically and horizontally).

I've tried this code:

<div class="container" style="width: 800px">
  <div class="row">
    <div style="
          height:340px; 
          width: 100%; 
          overflow: hidden;
          border: 3px solid red;
          ">
      <img src="http://via.placeholder.com/500x500" style="
            object-position: center;
            object-fit: cover;
            ">
    </div>
  </div>
</div>

And here's the result:

Why isn't it scaling up, centering and cropping the image?

Answer 1

Give the image some dimensions (compare to the second image, which has no defined dimensions)

<div class="container" style="width: 800px">
  <div class="row">
    <div style="
      height:150px; 
      width: 250px; 
      overflow: hidden;
      border: 3px solid red;
      ">
      <img src="http://placekitten.com/400/200" style="
        width:100%;
        height:100%;
        object-position: center;
        object-fit: cover;
        ">
    </div>
  </div>
  <br>
  <div class="row">
    <div style="
      height:150px; 
      width: 250px; 
      overflow: hidden;
      border: 3px solid red;
      ">
      <img src="http://placekitten.com/400/200" style="
        object-position: center;
        object-fit: cover;
        ">
    </div>
  </div>
</div>