CSS flexbox容器用圖像填充邊界（firefox 27）

我試圖將圖像置於flexbox容器中（請參見下面的確切代碼）。它必須執行以下操作：如果需要的話 CSS flexbox容器用圖像填充邊界（firefox 27）

問題

中心圖像水平
中心圖像垂直
縮減圖像到90％的容器寬度或高度，但是，是火狐（v27）的作用就好像圖像始終是寬度和高度的90％。 Chrome瀏覽器和移動瀏覽器似乎都以我想要的方式渲染。
```
<div class="flex-cc"> 
    <img src="image/url/" alt="" /> 
</div> 
```
小提琴： http://jsfiddle.net/f4fg5/1/

有什麼辦法來克服這個Firefox的行爲？

UPDATE 這個問題有答案，但它提供了一種替代方法，而不是解決flexbox問題。如果您想要在容器中居中放置圖像，請查看接受的答案。

來源

2014-02-22 Marius

您是否在使用Flexbox？因爲您需要垂直居中放置圖像，或者您是否將其用於其他原因？ – cimmanon

@cimmanon只是爲了垂直居中。到目前爲止，Flexbox是我嘗試做類似事情時看到的最清晰的html語法。 – Marius

爲了達到這個目的，我打算建議放棄使用Flexbox，因爲在某些瀏覽器中試圖縮放圖像會產生意想不到的結果。

有用於垂直定心非常緊湊的替代方法，該方法具有在IE9工作的一個額外的好處（前綴可能是必要的）：

http://jsfiddle.net/f4fg5/6/

.flex-cc { 
    float: left; 
    height: 150px; 
    margin-bottom: 10px; 
    margin-right: 10px; 
    width: 150px; 
    background: yellow; 
} 
.flex-cc img { 
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); 
    max-height: 90%; 
    max-width: 90%; 
    position: relative; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
}

來源

2014-02-22 02:58:53 cimmanon

你的小提琴在Chrome中不起作用我很害怕。即使使用-webkit前綴。 – Marius

你確定你把前綴放在正確的位置嗎？ http://jsfiddle.net/f4fg5/7/ – cimmanon