Firefox flex和最大寬度

我試圖顯示一個圖像居中並通過CSS調整大小（max-width/max-height,flex）。Firefox flex和最大寬度

這在Chrome中工作正常，但不在Firefox中。怎麼了？

a { 
 
    border: 1px solid red; 
 
    display: flex; 
 
    height: 100px; 
 
    width: 100px; 
 
    justify-content: center; 
 
    align-items: center; 
 
    box-sizing: border-box; 
 
    padding: 5px; 
 
} 
 
img { 
 
    max-width: 100%; 
 
    max-height: 100%; 
 
    border: 1px solid green; 
 
}

<a class="frame"> 
 
    <img src="http://placehold.it/500x150"/> 
 
</a>

參見：http://jsfiddle.net/ymLb50w0/2/

來源

2015-04-04 user3074069

嘗試這種解決方案

 a { 
     border: 1px solid red; 
     display: inline-block; 
      height: 100px; 
      width: 100px; 
     justify-content: center; 
     align-items: center; 
     box-sizing: border-box; 
      padding: 5px; 
     max-width: 100%; 
     } 
     img {  
     max-width: 100%; 
     max-height: 100%; 
     border: 1px solid green; 
     } 


    <body style="text-align: center;"> 
     <a class="frame"> 
      <img src="http://placehold.it/500x150"/> 
     </a> 
    </body>

來源

2015-04-04 13:25:47 Edward

如果我使用'inline-block'，圖片不再是垂直居中。 – user3074069 2015-04-04 13:45:26

您可以嘗試對齊垂直像它的解釋here

一個水平lignment不應該是一個問題

來源

2015-04-13 09:06:56 JustMichael

Firefox flex和最大寬度

回答

相關問題