CSS flexbox容器用图像填充边界（firefox 27）

我正在尝试将图像居中放置在flexbox容器中（请参见下面的确切代码）。它必须做到以下几点：

• 水平居中图像
• 垂直居中图像
• 如果需要，将图像缩小到90%容器宽度或高度

然而，问题是firefox（v27）的表现方式好像图像总是90%的宽度和高度。Chrome和移动浏览器似乎以我想要的方式呈现了这一点

<div class="flex-cc">
    <img src="image/url/" alt="" />
</div>

小提琴：

有没有办法克服这种firefox行为

更新

---

这个问题有一个答案，但它提供了一种替代方法，而不是解决flexbox问题。如果您希望将图像居中放置在容器中，请查看已接受的答案。

我建议为此使用Flexbox删除图像，因为尝试缩放图像在某些浏览器中会产生意外结果

有一种非常紧凑的垂直定心替代方法，它具有在IE9中工作的额外优势（可能需要前缀）：

---

我可能已经找到了这个问题的答案：
在

img

元素上设置

width:-moz-available

几乎可以修复它，Firefox31支持它
更新的JSFIDLE:

---

使用Flexbox是因为需要将图像垂直居中，还是因为其他原因？@cimmanon仅用于垂直居中。Flexbox拥有迄今为止我在尝试做类似事情时见过的最干净的html语法。即使使用-webkit前缀。您确定将前缀放在了正确的位置吗？

.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%);
}