當我使用flexbox添加更多圖像時，圖像會變得粗糙

Question

我正在使用amchart，我想在一個頁面中顯示多個圖表（作爲列），我的問題是不管我添加多少圖表（是的，我希望他們擠壓）也當我只顯示一個圖表我希望它在它的正常大小（不壓縮或小）

我該如何實現這一目標？ 我現在正在嘗試使用圖像，如果它能正常工作，我會在我的圖表上做到這一點。

HTML：

<div class="content"> 
    <div class="row"> 
    <div class="cell"> 
     <img src="http://i.imgur.com/OUla6mK.jpg"/> 
    </div> 
    <div class="cell"> 
     <img src="http://i.imgur.com/M16WzMd.jpg"/> 
    </div> 
     <div class="cell"> 
     <img src="http://i.imgur.com/M16WzMd.jpg"/> 
    </div> 
     <div class="cell"> 
     <img src="http://i.imgur.com/M16WzMd.jpg"/> 
    </div> 
    </div> 
    </div> 
</div> 

CSS：http://jsfiddle.net/89dtxt6s/356/

感謝：

上的jsfiddle

body{ overflow-y : hidden;} 
.content { 
    background-color: yellow;  

} 

.row { 
    display: -webkit-box; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 

    -webkit-box-orient: vertical; 
    -moz-box-orient: vertical; 
    box-orient: vertical; 
    flex-direction: column; 

    -webkit-box-pack: center; 
    -moz-box-pack: center; 
    box-pack: center; 
    justify-content: center; 

    -webkit-box-align: center; 
    -moz-box-align: center; 
    box-align: center; 
    align-items: center; 

    background-color: red; 

} 

.cell { 
    -webkit-box-flex: 1; 
    -moz-box-flex: 1; 
    box-flex: 1; 
    -webkit-flex: 1 1 auto; 
    flex: 1 1 auto; 

    padding: 10px; 
    margin: 10px; 

    background-color: green; 
    border: 1px solid red; 
    text-align: center; 
} 
img {max-height:100%;} 

！

Answer 1

步驟1：以下內容添加到.row，以確保它填補了高度視：

.row { 
    height: 100vh; 
} 

步驟2：你需要給每個.cell柔性顯示器。此外，您需要將您的flex-basis（簡寫的第三個參數）調整爲100％。最後，如果需要，您需要將min-height設置爲零，以使每個元素完全縮小。

.cell { 
    display: flex; 
    flex-direction: column; 
    flex: 1 1 100%; /* no longer auto */ 
    min-height: 0; 
} 

步驟3：一百分之百的寬度和高度添加到圖像。

img { 
    width: 100%; 
    height: 100%; 
} 

結果：溼軟的圖像。醜陋？當然。但我沒有判斷。

https://jsfiddle.net/jaunkv7k/