Scaling, centering and cropping image with object-

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

See this example,

.object-fit_fill {
  -o-object-fit: fill;
     object-fit: fill;
}

.object-fit_contain {
  -o-object-fit: contain;
     object-fit: contain;
}

.object-fit_cover {
  -o-object-fit: cover;
     object-fit: cover;
}

.object-fit_none {
  -o-object-fit: none;
     object-fit: none;
}

.object-fit_scale-down {
  -o-object-fit: scale-down;
     object-fit: scale-down;
}

html {
  color: #eee;
  padding: 30px;
  font-family: 'Source Code Pro', Monaco;
  background-color: #333;
}

p {
  font-weight: 200;
  font-size: 13px;
  margin-bottom: 10px;
  margin-top: 0;
}

img {
  height: 120px;
  background-color: #444;
}

img[class] {
  width: 100%;
}

.original-image {
  margin-bottom: 50px;
}

.image {
  float: left;
  width: 40%;
  margin: 0 30px 20px 0;
}
.image:nth-child(2n) {
  clear: left;
}
.image:nth-child(2n+1) {
  margin-right: 0;
}

<div class="original-image">
<p>original image</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/image.png"> 
</div>

<div class="image">
  <p>object-fit: fill</p>
<img class="object-fit_fill" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/image.png">
</div>

<div class="image">
  <p>object-fit: contain</p>
<img class="object-fit_contain" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/image.png">
</div>

<div class="image">
  <p>object-fit: cover</p>
<img class="object-fit_cover" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/image.png">
</div>

<div class="image">
  <p>object-fit: none</p>
<img class="object-fit_none" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/image.png">
</div>

<div class="image">
  <p>object-fit: scale-down</p>
<img class="object-fit_scale-down" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/image.png">
 </div>

Answer 2

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>

Answer 3

When dealing with images of various sizes I always opt for setting the image URL in CSS rather than an IMG tag. The IMG tag is very limiting in terms of telling the browser how to render it in a container. In CSS you have far greater control.

So if you use background-image: url('{path/url}'); in your CSS then you can now use background-size: cover; or background-size: contain;

background-image: url('{path/url}')
background-size: cover;

cover: Scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area

contain: Scale the image to the largest size such that both its width and its height can fit inside the content area

You can also control where the image is centered via

image-position: center;    // or %50 %50 or 100px 10px, etc, etc

I find that cover really shines when responsiveness is a requirement of your site/app.

.image {
  background-image: url('http://coolwildlife.com/wp-content/uploads/galleries/post-3004/Fox%20Picture%20003.jpg');
  height: 340px;
  background-repeat: no-repeat;
  background-position: center;
}

.image.contain {
  background-size: contain;
}

.image.cover {
  background-size: cover;
}

<h3>Cover</h3>
<div class="container" style="width: 800px">
  <div class="row">
    <div style="
      height:340px; 
      width: 100%; 
      overflow: hidden;
      border: 3px solid red;
      ">
      <div class="image cover"></div>
    </div>
  </div>
</div>
<hr/>
<h3>Contain</h3>
<div class="container" style="width: 800px">
  <div class="row">
    <div style="
      height:340px; 
      width: 100%; 
      overflow: hidden;
      border: 3px solid red;
      ">
      <div class="image contain"></div>
    </div>
  </div>
</div>