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