CSS flexbox模型和图像宽度

Question

我在设置display属性设置为box或inline-box（inline-flex）的div内调整图像大小时遇到​​了一些问题。

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; 
}