Flex in Firefox riduce le immagini automaticamente, ma non in Chrome

Window width:

1 2 3

Wrapped in 500px wide div:

1 2 3

Ecco come appare il risultato in Firefox:

Screenshot della pagina in Firefox 53

Ecco come appare il risultato in Chrome:

Screenshot della pagina in Chrome 59

Come puoi vedere, in Firefox, le immagini sono state ridimensionate e ridimensionate, in modo che tutte le immagini si adattino a un’unica riga senza eseguire il wrapping o il ritaglio. Su Chrome, le immagini rimangono nelle loro dimensioni originali, il che causa il ritaglio in piccole windows o div.

È previsto? Sto facendo qualcosa di sbagliato? Come posso ottenere lo stesso risultato sia in Firefox che in Chrome?

Queste sono le impostazioni iniziali in un contenitore flessibile:

  • flex-grow: 0
  • flex-shrink: 1
  • flex-basis: auto

La stenografia sarebbe:

  • flex: 0 1 auto

Pertanto, anche se non hai specificato queste regole nel codice, si applicano alle immagini.

Le immagini non possono crescere, possono ridursi (ugualmente e solo quanto basta per evitare di traboccare il contenitore), e inizialmente sono ridimensionate alla loro larghezza naturale (400px).

Questo è quello che stai vedendo in Firefox. Le immagini si restringono per adattarsi bene all’interno del contenitore.

In Firefox, le regole flessibili stanno annullando le dimensioni naturali dell’immagine.

In Chrome, invece, è vero il contrario. Le dimensioni delle immagini sono prevalenti.

La semplice soluzione cross-browser consiste nel racchiudere le immagini in un altro elemento, quindi questo nuovo wrapper diventa l’elemento flessibile e assume il flex: 0 1 auto predefinito flex: 0 1 auto e nulla deve essere sovrascritto.

 img { width: 100%; } 
 

Window width:

1 2 3

Wrapped in 500px wide div:

1 2 3

In questo caso, aggiungo gli align-items: flex-start al contenitore flessibile e quindi questa regola alle immagini

 img { min-width: 0; width: 100%; } 

Poiché align-items stretch , quindi si allungano, quindi la min-width impostata su auto che di nuovo indica la loro dimensione originale e, infine, dà loro la width: 100% modo che si adattino orizzontalmente e regolino l’altezza per mantenere le proporzioni .

Nota, dopo un rapido test del browser, questo non funzionerà su IE11 (ma funziona su Edge), quindi i bug esistono un po ‘ovunque, in base al codice utilizzato. La seconda opzione, dove si avvolge l’immagine, funziona comunque su IE11.

Stack snippet

 img { min-width: 0; width: 100%; } 
 

Window width:

1 2 3

Wrapped in 500px wide div:

1 2 3