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和最大宽度

回答

相关问题