フレックスボックス使用時に画像がオーバーフローする

Question

問題は、画像の高さがコンテナの境界にとどまらないことです。

画像に適用されている最大幅は機能しているようですが、最大高さは機能しません。

HTML

<div class="row-layout"> 
    <div class="artist-image"> 
    <img > 
    </div> 
    <div class="artist-image"> 
    <img > 
    </div> 
    <div class="artist-image"> 
    <img > 
    </div> 
</div> 

CSS

.row-layout { 
    display: flex; 
    flex-direction: row; 
    width: 100%; 
    height: 250px; 
} 
.artist-image { 
    flex-grow: 1; 
    flex-shrink: 0; 
    flex-basis: 0; 
    display: flex; 
    flex-direction: row; 
    justify-content: center; 
    align-items: center; 
} 
.artist-image > img { 
    max-width: 100%; 
    max-height: 100%; 
} 

この問題を解決する方法上の任意のアイデアをいただければ幸いです。

Answer 1

NEW（変更）ANSWER：

そのコンテナの背景画像などの画像、中央それらを定義し、background-size: containを選択してください。これは、常にコンテナの大きさに取り付け、元の比率で完全な画像を表示します：

.x { 
    background: url(http://placehold.it/600x400) center center no-repeat; 
    background-size: contain; 
} 

ここで全部はcodepenにあります：http://codepen.io/anon/pen/EKzQbK