L'adattamento degli oggetti non ha effetto sulle immagini

Question

Ho cercato di utilizzare object-fit su alcune immagini inserite all'interno degli elementi article, ma sembra che non li riguardino affatto.

Il valore desiderato per la proprietà object-fit è cover ma, al momento, nessuno degli altri valori sembra funzionare.

Quando cambio il suo valore, non si restringono, non crescono, non ... niente.

Se vedi il CodePen, ci sono spazi bianchi tra le due file e le immagini non occupano tutto lo stesso spazio/altezza (come ci si aspetterebbe con 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 vale per il contenuto sostituito. Ciò significa che, quando l'immagine viene caricata sulla pagina, l'immagine reale viene sostituita. Quel contenuto all'interno del tag immagine si applica in base alla proprietà fit dell'oggetto. Questo è indipendente dal contenitore I.

Sostituire l'oggetto dell'articolo con i tag img dovrebbe far sì che le immagini si allunghino con la casella flex e si riempiano in modo appropriato.

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

Ecco cosa è dice nelle specifiche:

5.5. Sizing Objects: the object-fit property

La proprietà object-fit specifica come il contenuto di un replac L'elemento deve essere montato sulla scatola stabilita dall'altezza utilizzata e dalla larghezza .

Mi sono concentrato su ... installato nella casella stabilita dall'altezza e dalla larghezza utilizzate.

così ho aggiunto height e width attributi ai vostri img elementi, e sembra a lavorare adesso.

Revised Codepen

Per rimuovere la piccola linea di spazi bianchi sotto ogni immagine, aggiungere vertical-align: bottom al img. Per una spiegazione vedere qui: Mystery white space underneath image tag

Come nota a margine, si può prendere in considerazione il supporto del browser per:

1. object-fit (nessun supporto di IE; un supporto limitato Safari)
2. main (nessun supporto IE)
3. flexbox (si pensi prefissi)

Answer 3

ho cambiato il contenitore, l'immagine e il padre del contenitore di box-sizing: content-box poiché img viene sostituito e acceso il object-fit: cover sul contenitore anziché img. Dal momento che img dovrebbe essere ritagliato, un'altezza di 100vh e una larghezza del 100% e un offset di + 22hw hanno funzionato bene nei primi quattro, sembra esserci un po 'di distorsione sia nel secondo img in basso, non molto. object-position ancora non funziona per me (non fa mai): - \

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