Object-fit not affecting images

Question

I've been trying to use object-fit on a few images placed inside article elements, but it doesn't seem to affect them at all.

The desired value for the object-fit property would be cover, but as of right now, none of the other values seem to work either.

When I change it's value, they don't shrink, don't grow, don't ... nothing.

If you see the CodePen, there are white spaces between the two rows, and the images don't take all the same space/height (as it would be expected with object-fit: cover).

Here's a CodePen

body{  	margin: 0 auto; padding: 0;  }  main{  	min-height: 70vh;  	padding: 0;  }  main > section.posts{  	box-sizing: border-box;  	margin: 0; padding: 0;  	display: flex;  	flex-flow: row wrap;  }  main > section.posts > article{    outline: 1px solid red;  	width: 22vw;  	min-height: 100vh;  	margin: 0; padding: 0;  	flex-grow: 1;  	overflow: hidden;  	box-sizing: border-box;  }  main > section.posts > article > img{  /* Our suspect */    object-fit: cover;  }

<!--  Basic structure of this file is    <main>    <section.posts>        <article> (six of them)            <image>  -->    <main>    <section class="posts">      <article>        <img src="http://41.media.tumblr.com/tumblr_m6s6d65lE11qdnz8wo1_400.jpg">      </article>        <article>        <img src="http://41.media.tumblr.com/71c1fe7c899cd048fb961d3c1953411b/tumblr_nj24pvINyW1qzq8p3o1_400.jpg">      </article>        <article>        <img src="http://36.media.tumblr.com/3358cb6ac8eaa0e61dffd53bc1bab93d/tumblr_n92l475hol1qlmppmo1_400.png">      </article>        <article>        <img src="http://36.media.tumblr.com/9ad997ca0385a23a8d82ec919da2392c/tumblr_nwcewbFVAL1s71gzco1_400.jpg">      </article>        <article>        <img src="http://41.media.tumblr.com/tumblr_mbl45xDSwj1qfn79co1_400.jpg">      </article>        <article>        <img src="http://41.media.tumblr.com/1c3718e71a2aa5acaaaf4af654991c91/tumblr_nx6psaH67d1tvh80lo1_400.jpg">      </article>    </section>  </main>

Answer 1

For object-fit to work, the image itself needs a width and height. In the OP's CSS, the images do not have width and/or height set, thus object-fit cannot work.

The clue: width and height need NOT be the dimensions of the image itself! Think of it as if it were a div: If you want a div to fill its container, you will set

width:100%; height:100%; 

...and the browser will know that this div should completely fill its container's space.

In case of an img, the browser performs two steps:

1. The browser creates a bounding box: By default, the box dimensions will be the exact dimensions of the image itself. But we're free to tell the browser to size the image to 100% of its container's width and 100% of its container's height. Then it will create a box that completely fills the container's space.
2. The browser fits the image pixels into this box: By default, the image will be squeezed/stretched so the image width matches the box width, and the image height matches the box height. But using object-fit, you can select how to match image and box dimensions. For example, using object-fit:cover commands to enlarge/downsize the image to completely fill the box while maintaining its aspect ratio.

Regarding the OP, I would simply set:

main > section.posts > article > img {   width: 100%; /* image box size as % of container, see step 1 */   height: 100%; /* image box size as % of container, see step 1 */   object-fit: cover; /* matching of image pixels to image box, see step 2 */ } 

One final caveat: When using % values for sizing, the container must have a defined width and height for object-fit to work. OP would need to define height in main > section.posts > article.

Answer 2

object-fit only affects the way the picture displays inside of the img boundaries.

Object-Fit

The object-fit CSS property sets how the content of a replaced element, such as an <img> or <video>, should be resized to fit its container.

Replaced Element

elements whose contents are not affected by the current document's styles. The position of the replaced element can be affected using CSS, but not the contents of the replaced element itself.

This means that the object-fit is independent of your article elements as object-fit only cares about the dimensions of the img element.

The point of this is that you need to get the img elements to stretch to those dimensions first. The object-fit only affects the way the picture displays inside of the img boundaries.

Sample Code / Demonstration

$(function() { $("img").resizable(); });

img {   width: 300px;   height: 300px;   border: 1px solid #FF0000;   background-color: #00FF00; }  .fill {   object-fit: fill; }  .contain {   object-fit: contain; } .cover {   object-fit: cover; } .none {   object-fit: none; } .scaledown {   object-fit: scale-down; }  .variant1 {   max-width: 100px; }  .variant2 {   max-height: 100px; }

<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> <p>Resize images to see properties with different dimensions.</p>  <h1>fill (default)</h1> <img src="https://i.stack.imgur.com/EtYb2.jpg" class="fill" />  <h1>contain</h1> <img src="https://i.stack.imgur.com/EtYb2.jpg" class="contain" />  <h1>cover</h1> <img src="https://i.stack.imgur.com/EtYb2.jpg" class="cover" />  <h1>none</h1> <img src="https://i.stack.imgur.com/EtYb2.jpg" class="none" />  <h1>scale-down</h1> <img src="https://i.stack.imgur.com/EtYb2.jpg" class="scaledown" /> <!-- Spacer for scale down scroll annoyance --> <br /><br /><br /><br /><br /><br /><br />

Solutions to Question

Solution 1: More flex

Using your current HTML structure you can use the snippet below to apply an additional flex inside of each article.

// //   Image styles are near the end of file //   (Line 28) //  body{     margin: 0 auto; padding: 0; } main{     min-height: 70vh;     padding: 0; } main > section.posts{     box-sizing: border-box;     margin: 0; padding: 0;     display: flex;   align-content: stretch;     flex-flow: row wrap; } main > section.posts > article{   outline: 1px solid red;     width: 22vw;     min-height: 100vh;     margin: 0; padding: 0;     flex-grow: 1;     overflow: hidden;     box-sizing: border-box;   display: flex;   align-content: stretch;   align-items: stretch; } main > section.posts > article > img{   object-fit: cover;   flex: 1; }

<!-- Basic structure of this file is  <main>   <section.posts>       <article> (six of them)           <image> -->  <main>   <section class="posts">     <article>       <img src="https://41.media.tumblr.com/tumblr_m6s6d65lE11qdnz8wo1_400.jpg">     </article>      <article>       <img src="https://41.media.tumblr.com/71c1fe7c899cd048fb961d3c1953411b/tumblr_nj24pvINyW1qzq8p3o1_400.jpg">     </article>      <article>       <img src="https://36.media.tumblr.com/3358cb6ac8eaa0e61dffd53bc1bab93d/tumblr_n92l475hol1qlmppmo1_400.png">     </article>      <article>       <img src="https://36.media.tumblr.com/9ad997ca0385a23a8d82ec919da2392c/tumblr_nwcewbFVAL1s71gzco1_400.jpg">     </article>      <article>       <img src="https://41.media.tumblr.com/tumblr_mbl45xDSwj1qfn79co1_400.jpg">     </article>      <article>       <img src="https://41.media.tumblr.com/1c3718e71a2aa5acaaaf4af654991c91/tumblr_nx6psaH67d1tvh80lo1_400.jpg">     </article>   </section> </main>

Solution 2: Remove article elements

Or you could restructure your html to remove the article elements and flex the img elements.

    body{         margin: 0 auto; padding: 0;     }     main{         min-height: 70vh;         padding: 0;     }     main > section.posts{         box-sizing: border-box;         margin: 0; padding: 0;         display: flex;         flex-flow: row wrap;     }     main > section.posts > img{       outline: 1px solid red;         width: 22vw;         min-height: 100vh;         margin: 0; padding: 0;         flex-grow: 1;         overflow: hidden;         box-sizing: border-box;     }     main > section.posts  > img{  /* Our suspect */       object-fit: cover;     }

    <main>       <section class="posts">                <img src="http://41.media.tumblr.com/tumblr_m6s6d65lE11qdnz8wo1_400.jpg">            <img src="http://41.media.tumblr.com/71c1fe7c899cd048fb961d3c1953411b/tumblr_nj24pvINyW1qzq8p3o1_400.jpg">                              <img src="http://36.media.tumblr.com/3358cb6ac8eaa0e61dffd53bc1bab93d/tumblr_n92l475hol1qlmppmo1_400.png">                              <img src="http://36.media.tumblr.com/9ad997ca0385a23a8d82ec919da2392c/tumblr_nwcewbFVAL1s71gzco1_400.jpg">                              <img src="http://41.media.tumblr.com/tumblr_mbl45xDSwj1qfn79co1_400.jpg">                              <img src="http://41.media.tumblr.com/1c3718e71a2aa5acaaaf4af654991c91/tumblr_nx6psaH67d1tvh80lo1_400.jpg">                </section>     </main>