Firefox flex и max-width

Я пытаюсь отобразить изображение с центрированным и измененным размером CSS (max-width/max-height, flex).Firefox flex и max-width

Это прекрасно работает в 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

Вы можете попытаться выровнять его по вертикали, как это объяснено here

Горизонтальные lignment не должно быть проблемой

источник

2015-04-13 09:06:56 JustMichael

Firefox flex и max-width

ответ

Смежные вопросы