物體適合不影響圖像

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%; 
}