フレックスボックスでFirefoxで反応する画像を表示するには

Question

フレックスボックスでFirefoxで縦に整列した画像を作成する方法はわかりません。

マイコードは、Safariの

ではなく、Firefoxで動作します。

Firefox Screenshot

画像の重複は、ウィンドウをschrinkingとき、親のdivを重ね続けます。

.wrapper { 
     position: absolute; 
     top: 10px; 
     bottom: 10px; 
     left: 10px; 
     right: 10px; 
     border: 1px solid red; 
     padding: 10px; 
     } 

     .flexbox { 
     height: 100%; 
     display: flex; 
     align-items: center; 
     justify-content: center; 
     border: 1px solid green; 
     } 

     .flex-child { 
     border: 2px solid blue; 
     } 

     .flex-child img { 
     max-width: 100%; 
     max-height:100%; 
     height: auto; 
     } 

そして、ここでのhtml：

<div class="wrapper"> 
     <div class="flexbox"> 
     <div class="flex-child"> 
      <img src="http://dummyimage.com/800X600/000/fff"> 
     </div> 
     </div> 
    </div> 

そしてJSFiddleへのリンク

は、ここに私のCSSです。

Answer 1

たぶん

このない最善の解決策が、それはクロム、SafariとFirefoxで動作します少なくとも：

HTML：

<div class="wrapper"> 
</div> 

CSS：実は

.wrapper { 
    position: absolute; 
    top: 10px; 
    bottom: 10px; 
    left: 10px; 
    right: 10px; 
    border: 1px solid red; 
    padding: 10px; 
    background: url("http://dummyimage.com/800X600/000/fff") no-repeat center center; 
    background-size: contain; 
} 

JSFiddle