Question

我正在尝试以CSS（max-width / max-height，flex）为中心显示图像并调整其大小。

这在Chrome中运行良好，但在Firefox中运行不正常。怎么了？

＆＃13;

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

＆＃13;

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

＆＃13;

请参阅：http://jsfiddle.net/ymLb50w0/2/

Answer 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>

Answer 2

您可以尝试将其垂直对齐，就像它解释here

一样

水平对齐应该不是问题

Firefox flex和max-width

2 个答案: