Question

我正在尝试将图像置于Flexbox容器中（请参阅下面的确切代码）。它必须执行以下操作：

水平居中图像
垂直中心图像
根据需要将图像缩小到90％的容器宽度或高度

然而，问题是firefox（v27）的作用就好像图像的宽度和高度始终为90％。 Chrome和移动浏览器似乎以我想要的方式呈现。

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

小提琴： http://jsfiddle.net/f4fg5/1/

有没有办法克服这种火狐行为？

更新这个问题有一个答案，但它提供了一种替代方法，而不是解决Flexbox问题。如果您想要将图像放在容器中心并使其适合，请查看接受的答案。

Answer 1

我打算建议放弃使用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%);
}

Answer 2

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

在width: -moz-available元素上设置img几乎可以修复它，它受到firefox 31的支持。

https://developer.mozilla.org/de/docs/Web/CSS/width

更新了jsfiddle：

http://jsfiddle.net/f4fg5/10/

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

2 个答案: