如何防止flexbox水平拉伸我的圖像？

Question

我看到了有關Flexbox的垂直拉伸圖像，並應用對齊自這樣的問題：中心修復它： Why does flexbox stretch my image?

不過，我有一個問題，我的圖像水平拉伸： 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%; 
} 

我所嘗試的一切我似乎無法讓圖像不被拉伸。我希望圖像爲父級的100％高度，並保持原始寬高比。

Answer 1

更新CSS部分

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

關於object-fithttps://css-tricks.com/almanac/properties/o/object-fit/