物体适合不影响图像

Question

我一直试图在article元素内的几张图像上使用object-fit，但它似乎没有影响它们。

object-fit属性的期望值将是cover，但是到目前为止，其他值都不起作用。

当我改变它的价值时，它们不缩水，不增长，不......没有。

如果您看到CodePen，则两行之间会有空白，并且图像不会占用全部相同的空间/高度（与预期的object-fit: cover一样）。

Here's a CodePen

body{ 
 
\t margin: 0 auto; padding: 0; 
 
} 
 
main{ 
 
\t min-height: 70vh; 
 
\t padding: 0; 
 
} 
 
main > section.posts{ 
 
\t box-sizing: border-box; 
 
\t margin: 0; padding: 0; 
 
\t display: flex; 
 
\t flex-flow: row wrap; 
 
} 
 
main > section.posts > article{ 
 
    outline: 1px solid red; 
 
\t width: 22vw; 
 
\t min-height: 100vh; 
 
\t margin: 0; padding: 0; 
 
\t flex-grow: 1; 
 
\t overflow: hidden; 
 
\t 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

对象适合应用于更换内容。这意味着，当页面加载图像时，实际图像被替换。图片标签中的内容基于对象适合属性应用。这与我的容器无关。

用你的img标签替换文章对象应该会导致图像伸展​​你的弹性盒并适当填充。

http://jsfiddle.net/o2fx87ws/

body{ 
 
    \t margin: 0 auto; padding: 0; 
 
    } 
 
    main{ 
 
    \t min-height: 70vh; 
 
    \t padding: 0; 
 
    } 
 
    main > section.posts{ 
 
    \t box-sizing: border-box; 
 
    \t margin: 0; padding: 0; 
 
    \t display: flex; 
 
    \t flex-flow: row wrap; 
 
    } 
 
    main > section.posts > img{ 
 
     outline: 1px solid red; 
 
    \t width: 22vw; 
 
    \t min-height: 100vh; 
 
    \t margin: 0; padding: 0; 
 
    \t flex-grow: 1; 
 
    \t overflow: hidden; 
 
    \t 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

下面是是说，在规格：

5.5. Sizing Objects: the object-fit property

的object-fit属性指定replac如何内容编号 元件应安装在由其使用的高度和宽度确定的箱子上。

我专注于... 安装到由其使用的高度和宽度建立的箱子。

所以我添加height和width属性您img元素，似乎现在的工作。

Revised Codepen

要删除空格的微小线的每个图像下，添加vertical-align: bottom到img。有关说明见这里：Mystery white space underneath image tag

作为一个侧面说明，你可能要考虑对浏览器的支持：

1. object-fit（没有IE的支持;限制Safari浏览器支持）
2. main（不支持IE）
3. flexbox（考虑前缀）

Answer 3

我改变了容器，图像和所述容器的至box-sizing: content-box父因为IMG被替换和容器代替IMG上切换object-fit: cover。由于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%; 
}