要使object-fit工作，图像本身需要width和height。在OP的CSS中，图像没有设置宽度和/或高度，因此对象适配无法工作。

**提示：width和height不一定是图像本身的尺寸！**将其视为div：如果您希望div填充它的容器，您将设置

width:100%; height:100%;

...浏览器将知道此div应该完全填满其容器的空间。
在img的情况下，浏览器执行两个步骤：
1.浏览器会建立边界框：默认情况下，框的尺寸就是图片本身的尺寸。但是我们可以告诉浏览器将图片的大小调整为容器宽度的100%和容器高度的100%。然后，它将创建一个完全填充容器空间的框。
1.浏览器将图像像素放入此框：默认情况下，图像将被压缩/拉伸，以使 * 图像宽度与框宽度 * 匹配，* 图像高度与框高度 * 匹配。但使用object-fit，您可以选择如何匹配图像和框尺寸。例如，使用object-fit:cover命令放大/缩小图像，以完全填充框，同时保持其纵横比。
关于OP，我将简单地设置：

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 */
}

最后一个警告：使用%值调整大小时，容器必须有定义的宽度和高度，才能进行对象调整。OP需要在main > section.posts > article中定义height。

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>

以下是规范中的说明：

• • 5.5.调整对象大小：object-fit属性**

object-fit属性指定应如何将被替换元素的内容调整到由其使用的高度和宽度建立的框中。
我关注的是... * 是否适合根据所用高度和宽度确定的 Package 盒。*
因此，我将height和width属性添加到img元素中，现在似乎可以工作了。
Revised Codepen
要删除每个图像下面的一小行空白，请将vertical-align: bottom添加到img。有关说明，请参阅此处：Mystery white space underneath image tag
顺便说一下，您可能需要考虑浏览器对以下内容的支持：
1.* * object-fit（不支持IE）
1.* * main（不支持IE）

1. Flexbox（考虑前缀）

我也遇到过类似的问题，对象匹配不起作用。我在图像中添加了最大宽度，它起作用了。

.myImg {
    object-fit: cover;
    max-width: 100%;
    object-position: center;
}

我发现了一个非常简单的技巧，对我来说效果最好，但首先要感谢泰尼恩从他的回答中得到的启发。
您可以简单地将img元素放在您想要的任何大小的div元素中，然后将图像的宽度和高度设置为inherit，然后再设置您想要的任何对象适合值，它将完美地工作。

我将容器、图像和容器的父项更改为box-sizing: content-box，因为img被替换，并将容器上的object-fit: cover替换为img。由于img预计将被裁剪，100vh的高度和100%的宽度以及+22hw偏移量在顶部四个位置上工作良好，底部两个img似乎都有一点失真。不太多。object-position仍然不适用于我（从来不适用）：-
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%;
}

您可以在div标记中使用background-size，而不是在img标记中使用object-fit，这对我来说非常有效。

{
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
  padding: 0px;
  margin: 0px;
}