Firefox flex 和最大宽度答案

【问题标题】：Firefox flex and max-widthFirefox flex 和最大宽度
【发布时间】：2015-06-09 09:54:45
【问题描述】：

我正在尝试显示一个由 CSS 居中并调整大小的图像（max-width / max-height, 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/

【问题讨论】：

标签： css image firefox flexbox

【解决方案1】：

试试这个解决方案...

      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>

【讨论】：

如果我使用inline-block，图片不再垂直居中。

【解决方案2】：

您可以尝试像here 解释的那样垂直对齐它

水平对齐应该不是问题

【讨论】：