Wie verhindere ich, dass Flexbox mein Bild horizontal streckt?

Question

sah ich diese Frage zu Flexbox Bildern vertikal gestreckt, und richten Sie selbst Anwendung: Mitte fixiert es: Why does flexbox stretch my image?

Ich habe jedoch ein Problem mit meinen Bildern horizontal gestreckt: https://jsfiddle.net/qnnpxskk/

HTML:

<div class="wrapper"> 
    <div class="inner"> 
    <div class="row"> 
     <img src="https://www.wired.com/wp-content/uploads/2015/11/google-tensor-flow-logo-F.jpg"> 
    </div> 
    <div class="row"> 
     <img src="https://www.wired.com/wp-content/uploads/2015/11/google-tensor-flow-logo-F.jpg"> 
    </div> 
    </div> 
</div> 

CSS:

.wrapper{ 
    width: 600px; 
    height: 900px; 
    background: white; 
} 
.inner{ 
    display: flex; 
    flex-direction: column; 
} 
.row{ 
    max-height: 100px; 
    margin: 20px; 
    display: flex; 
    flex-direction: row; 
    background: red; 
} 
.row img{ 
    max-height: 100%; 
} 

Alles, was ich versuche Ich kann nicht scheinen, dass das Bild nicht gestreckt wird. Ich möchte, dass das Bild 100% Höhe des Elternteils und die Breite das Seitenverhältnis des Originals beibehält.

Answer 1

CSS-Update Teil

.row img{ 
    max-height: 100%; 
    object-fit:contain; /* Add this You can change it as your need */ 
} 
.inner{ 
    display: flex; 
    flex-flow:column nowrap; 
    justify-content:flex-start; 
} 
.wrapper{ 
    width: 100%; /*Add this*/ 
    height: 900px; 
    background: white; 
} 

Update Geige

Update fiddle

.wrapper{ 
 
    width: 100%; 
 
    height: 900px; 
 
    background: white; 
 
} 
 
.inner{ 
 
    display: flex; 
 
    flex-flow:column nowrap; 
 
    justify-content:flex-start; 
 
} 
 
.row{ 
 
    max-height: 100px; 
 
    margin: 20px; 
 
    display: flex; 
 
    flex-direction: row; 
 
    background: red; 
 
} 
 
.row img{ 
 
    max-height: 100%; 
 
    object-fit:contain; 
 
}

<div class="wrapper"> 
 
    <div class="inner"> 
 
    <div class="row"> 
 
     <img src="https://www.wired.com/wp-content/uploads/2015/11/google-tensor-flow-logo-F.jpg"> 
 
    </div> 
 
    <div class="row"> 
 
     <img src="https://www.wired.com/wp-content/uploads/2015/11/google-tensor-flow-logo-F.jpg"> 
 
    </div> 
 
    </div> 
 
</div>

Über object-fithttps://css-tricks.com/almanac/properties/o/object-fit/