chrome respektiert das Bildseitenverhältnis in Flexbox nicht

Question

Flexboxes machen es einfach, Layouts zu erstellen, die basierend auf dem verfügbaren Platz intelligent wachsen und schrumpfen. Ich benutzte diese Funktion, um zwei Bilder zu zeichnen, die jeweils die Hälfte der Breite des Bildschirms einnehmen. In Firefox werden die Bilder wie erwartet gerendert und behalten ihr Seitenverhältnis bei, aber in Chrome werden die Bilder zu jeweils 50% horizontal gequetscht und vertikal in voller Höhe belassen.

Hier ist eine Demo von dem, was ich spreche:

.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>

ich in an answer to a similar question gelesen habe, dass dies ein Fehler Chrome ist. Wie kann ich sauber herumarbeiten?

Dank

Answer 1

Die Elemente in einer Flexbox werden standardmäßig in ihrer Größe gedehnt. Wenn Sie möchten, dass sie sich nicht auf der Querachse (vertikal) dehnen, können Sie das Standardverhalten mit dem align-items des Containers ändern.

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

CSS

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

Answer 2

Sie können dies, indem Sie die height Eigenschaft auf Ihre img Regel lösen, und es einen Wert von auto geben:

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

Answer 3

Nehmen object-fit: scale-down; auf die Bilder. Ja, das Hinzufügen von height: auto; funktioniert leider nicht. Ähnliches Problem hier gelöst: max-width of img inside flexbox doesn't preserve aspect ratio