CSS flexbox 模型和图像宽度

Question

我在将 display 属性设置为 box 或 inline-box (inline-flex).

CSS

.thumb {
    height: 250px;
    width: 300px;
    /* Firefox */
    display: -moz-inline-box;
    -moz-box-pack: center;
    -moz-box-align: center;
    /* Safari, Opera, and Chrome */
    display: -webkit-inline-box;
    -webkit-box-pack: center;
    -webkit-box-align: center;
    /* W3C */
    display: inline-flex;
    box-pack: center;
    box-align: center;
}

.thumb img {
    width: 280px;
}

HTML

<div class="thumb">
    <img src="image1.png" alt="Image 1" />
</div>

在 Chrome 中，结果如我所料，图像宽度为 280 像素，高度与宽度成正比，图像水平和垂直居中:http://jsfiddle.net/AkwDk/ .

然而，在 Firefox 和 Opera 中，结果有所不同，图像宽度被忽略，而高度为 100%。我能够通过向图像添加 margin: auto 来解决高度问题，至少在 FF 中是这样，但宽度问题仍然存在:http://jsfiddle.net/AkwDk/1/ .

有什么想法吗？

Answer 1

关于 Firefox，您必须了解的一点是，它对已弃用的 2009 Flexbox 草案的实现在很多方面都有问题。好消息是 Firefox 正在实现 CR Flexbox 草案很快。

http://codepen.io/cimmanon/pen/prHKc

.thumb {
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fafafa), color-stop(100%, #eaeaea));
  background-image: -webkit-linear-gradient(#fafafa, #eaeaea);
  background-image: -moz-linear-gradient(#fafafa, #eaeaea);
  background-image: -o-linear-gradient(#fafafa, #eaeaea);
  background-image: linear-gradient(#fafafa, #eaeaea);
  height: 250px;
  width: 300px;
  margin: 10px;
  border: 1px solid #CACACA;
  border-radius: 3px;
  display: -webkit-inline-box;
  display: -moz-inline-box;
  display: -ms-inline-flexbox;
  display: -webkit-inline-flex;
  display: inline-flex;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -moz-box-align: center;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  vertical-align: text-top;
}

.thumb img {
  max-width: 280px;
  margin: 10px;
}