Object malfunction not affecting images

Question

I am trying to use object-fit on several images placed inside article elements, but this does not seem to affect them at all.

The desired value for the object-fit property will be cover , but at the moment none of the other values ​​are working.

When I change its meaning, they do not shrink, do not grow, not ... nothing.

If you see CodePen, there are spaces between the two lines and the images do not occupy the same space / height (as expected with object-fit: cover ).

Here is 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

Object Fit

The CSS “fit object” property determines how to resize the contents of the replaced element, such as <img> or <video> , to fit its container.

Replaced item

Elements whose contents are not affected by the current document styles. The position of the replaced element can be changed using CSS, but not the content of the replaced element itself.

This means that fitting the object does not depend on your article elements, since fitting the object only affects the size of the img element.

The bottom line is that you need to first make the img elements stretch to these sizes. object-fit only affects the way the image is displayed inside the img borders.

Sample Code / Demo

 $(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 the issue

Solution 1. More Flexibility

Using your current HTML structure, you can use the snippet below to apply extra flexibility within 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 Items

Or you can restructure your HTML to remove article elements and bend 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> 

Answer 2

For object-fit the image itself requires width and height . In OP CSS, images do not have width and / or height, so fitting objects cannot work.

Hint: width and height should NOT be the size of the image itself! Think of it as a div : if you want the div fill your container, you will set

 width:100%; height:100%; 

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

In the case of img browser takes two steps:

1. The browser creates a bounding box : by default, the dimensions of the rectangle will be the exact dimensions of the image itself. But we can tell the browser that the image size should be 100% of the width of the container and 100% of the height of the container. Then it will create a box that completely fills the container space.
2. The browser places the image pixels in this field : by default, the image will be compressed / stretched so that the image width matches the block width and the image height matches the block height. But with object-fit you can choose how to match image sizes and frames . For example, using the object-fit:cover commands to enlarge / reduce the image to completely fill the field, while maintaining its aspect ratio.

As for the OP, I would just 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 */ } 

Last caveat: when using% values ​​to determine the size, the container must have a certain width and height in order for the object to work. The OP would have to define height in main > section.posts > article .

Answer 3

Here's what the spec says:

5.5. Sizing objects: object-fit property of an object

The object-fit property determines how the contents of the replaced element should be placed in the field determined by its used height and width.

I focused on ... adapted to the box fixed by its used height and width.

So I added height and width attributes to your img elements, and now it works.

Revised Codepen

To remove tiny whitespace lines under each image, add vertical-align: bottom to img . See here for an explanation: Mysterious empty space under the image tag

As a note, you can consider browser support for:

1. object-fit (no IE support; limited Safari support)
2. main (without IE support)
3. flexbox (consider prefixes)

Answer 4

I changed the container, image and parent container of the container to box-sizing: content-box , since img was replaced and switched object-fit: cover to the container instead of img. Since it is expected that the img will be trimmed, 100vh height and 100% width and 22hw offset have a good effect on the first four, it seems a little distorted like the bottom two img, not so much. object-position still doesn't work for me (never): - \

http://codepen.io/01/pen/zrvdaz?editors=110

 body{ margin: 0 auto; padding: 0; } main{ min-height: 70vh; padding: 0; } main > section.posts{ box-sizing: content-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:content-box; object-fit: cover; } main > section.posts > article > img{ display: block; box-sizing:content-box; max-height: 100vh; width: calc(100% + 22vh); object-position: 100% 100%; }