chrome non rispetta le proporzioni dell'immagine in flexbox

Question

Le Flexbox semplificano la creazione di layout che crescono e si riducono in modo intelligente in base allo spazio disponibile. Stavo usando questa funzione per disegnare due immagini che occupano ciascuna metà della larghezza dello schermo. In Firefox, le immagini vengono visualizzate come previsto e mantengono le proporzioni, ma in Chrome le immagini vengono schiacciate orizzontalmente al 50% ciascuna e lasciate a tutta altezza verticalmente.

Ecco una demo di quello che sto parlando:

.flexbox { 
 
    width: 100%; 
 
    display: flex; 
 
} 
 
img { 
 
    width: 50%; 
 
}

<div class="flexbox"> 
 
    <img src="http://res1.windows.microsoft.com/resbox/en/windows/main/2b03b0c4-85f7-4c28-9c60-1c7af2a62fa8_5.jpg" /> 
 
    <img src="http://res1.windows.microsoft.com/resbox/en/windows/main/b89eff70-398d-4b1b-8806-02458a185c5a_5.jpg" /> 
 
</div>

ho letto in an answer to a similar question che si tratta di un bug Chrome. Come posso lavorare in modo pulito intorno ad esso?

Grazie

Answer 1

Gli elementi in un flexbox si allungano per impostazione predefinita. Se si desidera che non si estendano sull'asse trasversale (verticale), è possibile utilizzare align-items sul contenitore per modificare il comportamento predefinito.

Fiddle:http://jsfiddle.net/g1vLff23/

CSS

.flexbox { 
    width: 100%; 
    display: flex; 
    align-items: flex-start; 
} 
img { 
    width: 50%; 
} 

Answer 2

È possibile risolvere questo problema aggiungendo la proprietà height al img regola e dandogli un valore auto:

img{ 
    height:auto; 
    width:50%; 
} 

Answer 3

Applicare object-fit: scale-down; alle immagini. Sì, l'aggiunta di height: auto; non fa il trucco, sfortunatamente. Problema simile risolto qui: max-width of img inside flexbox doesn't preserve aspect ratio