object-fit only affects the way the picture displays inside of the img boundaries.
Object-Fit个
Object-Fit CSS属性设置替换元素(如<img>或<video>)的内容应如何调整大小以适合其容器.
Replaced Element
其内容不受当前文档样式影响的元素.使用CSS可以影响被替换元素的位置，但不能影响被替换元素本身的内容.
这意味着Object-Fit独立于您的article个元素，因为Object-Fit只关心img个元素的尺寸.
这样做的要点是，您需要首先让img个元素延伸到这些维度.object-fit仅影响图片在img个边界内的显示方式.
示例代码/演示
$(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 />
问题的解决方案
Solution 1: More flex
使用您当前的HTML struct ，您可以使用下面的代码片段在每个article中应用额外的FLEX.
//
// 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
或者，您可以重新构造html以删除article个元素并调整img个元素.
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>