Flexbox的div的通過圖像調整

Question

Example page

火狐/ IE10 /歌劇，upong縮小窗口，在保持當前大小的圖像，不結垢做的。

Chrome是唯一一個可以按比例縮小比例的按比例縮小的按鈕。我無法分辨Chrome是否做錯了什麼，或者所有其他瀏覽器如何，或者如何解決它。

HTML

<section> 
<div class="card"><img src="http://placehold.it/120x200" alt="" /></div> 
<div class="card"><img src="http://placehold.it/120x200" alt="" /></div> 
<div class="card"><img src="http://placehold.it/120x200" alt="" /></div> 
<div class="card"><img src="http://placehold.it/120x200" alt="" /></div> 
<div class="card"><img src="http://placehold.it/120x200" alt="" /></div> 
</section> 

CSS

section { 
    display: -webkit-box; 
    display: -webkit-flex; 
    display: -moz-flex; 
    display: -ms-flexbox; 
    display: flex; 
    -webkit-flex-flow: row nowrap; 
    -moz-flex-flow: row nowrap; 
    -ms-flex-flow: row nowrap; 
    flex-flow: row nowrap; 
    -webkit-box-pack: center; 
    -ms-flex-pack: center; 
    -webkit-justify-content: center; 
    -moz-justify-content: center; 
    justify-content: center; 
    -webkit-box-align: end; 
    -ms-flex-align: end; 
    -webkit-align-items: flex-end; 
    -moz-align-items: flex-end; 
    align-items: flex-end; 
} 

.card { 
    margin: 0 5px; 
    position: relative; 
} 
.card img { 
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); 
    display: block; 
    max-height: 100%; 
    max-width: 100%; 
} 

Answer 1

的flexbox spec經歷了一些改變了過去幾年不同的瀏覽器已經實現了不同版本的規範的。在這一點上你不會看到很多兼容行爲。特別是IE10和Safari都有大多數的工作實現an old version of the spec。 Firefox有recently implemented support，但它是not enabled by default。

特別值得注意的是，基於Mozilla CSS擴展XUL的flexbox的原始設計是用於發佈空白空間，而不是調整已經具有固有尺寸的元素。出於這個原因，可能無法實現您在所有瀏覽器中瞄準的目標。

如果你仍然有興趣在一個真正的網站使用flexbox退房Modernizr，專門爲flexbox和flexboxlegacy測試，你幾乎肯定會寫出來了一組用於兩種情況的規則。

下面是瀏覽器的一些截圖我已經安裝：

火狐21：

火狐22：

鉻28：

劇院15：

鑑於較新版本的Firefox和Opera看起來與Chrome相同，我會認爲這是根據規範當前狀態的正確行爲。其他瀏覽器因此做錯了。至於你可以做些什麼，除了上面已經說過的內容之外，我可以說沒有太多 - 在舊版瀏覽器中使用基於檢測到的支持的替代方法。