Dopasowanie obiektów nie wpływa na obrazy

Question

Próbowałem użyć object-fit na kilku obrazach umieszczonych wewnątrz elementów article, ale wydaje się, że nie mają one żadnego wpływu na nie.

Żądaną wartością dla właściwości object-fit będzie cover, ale od tej pory żadna z pozostałych wartości nie działa.

Kiedy zmieniam jego wartość, nie kurczą się, nie rosną, nie ... nic.

Jeśli widzisz CodePen, pomiędzy tymi dwoma wierszami są białe spacje, a obrazy nie zajmują tej samej przestrzeni/wysokości (jak można się było spodziewać z 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

Object-fit dotyczy zastąpionego treści. Oznacza to, że po załadowaniu obrazu na stronę rzeczywisty obraz zostanie zastąpiony. Ta zawartość wewnątrz znacznika obrazu ma zastosowanie na podstawie właściwości dopasowania obiektu. Jest to niezależne od kontenera I'm.

Zastąpienie obiektu artykułu za pomocą znaczników img powinno spowodować rozciąganie obrazów przy użyciu skrzynki flex i prawidłowe wypełnienie.

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

Oto co jest napisane w specyfikacji:

5.5. Sizing Objects: the object-fit property

Obiekt object-fit Określa sposób zawartość replac ed element powinien być dopasowany do skrzynki ustalonej na podstawie użytej wysokości i szerokości .

Skoncentrowałem się na ... dopasowanym do skrzyni ustalonej na podstawie użytej wysokości i szerokości.

Więc dodałem height i width atrybuty do elementów img, i wydaje się działać teraz.

Revised Codepen

Aby usunąć niewielką linię spacji pod każdym zdjęciem dodać vertical-align: bottom do img. Dla wyjaśnienia zobaczyć tutaj: Mystery white space underneath image tag

Na marginesie, może warto rozważyć wsparcie przeglądarki dla:

1. object-fit (bez wsparcia IE; ograniczone wsparcie Safari)
2. main (brak wsparcia dla IE)
3. flexbox (rozważyć prefiksy)

Answer 3

Zmieniłem pojemnik, obraz i rodzica pojemnika do box-sizing: content-box od img otrzymuje i przełączył object-fit: cover na pojemniku zamiast img. Ponieważ img ma być przycięte, wysokość 100vh i szerokość 100% i offset + 22hw sprawdziły się dobrze w pierwszej czwórce, wydaje się, że jest trochę zniekształceń zarówno w dolnych dwóch img, jak i niewiele. object-position nadal nie działa dla mnie (nie ma): - \

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