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