Firefox flexbox ширина изображения

У меня возникли проблемы с получением моего изображения, чтобы получить не более 100% доступной ширины родительского контейнера. Я только замечаю проблему в Firefox 36 (не IE или Chrome). Так это ошибка firefox или я что-то пропустил здесь?

Примечание. Изображение никогда не должно быть больше оригинального размера.

Chrome:

Firefox:

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
.container {
  width:300px;
}
.flexbox {
  display:flex;
}

.flexbox .column {
  flex:1;
  background-color: red;
}

.flexbox .middleColumn {
  flex:3;
}

.flexbox .middleColumn img {
  width:auto;
  height:auto;
  max-width:100%;
  max-height:100%;
  align-self: center;
  display: block;
}
    </style>
  </head>
  <body>
    <div class="container">
      <div class="flexbox">
        <div class="column">This is the left column!</div>
        <div class="middleColumn">
          <img src="http://placehold.it/400/333333">
        </div>
        <div class="column">This is the right column!</div>
      </div>
    </div>
  </body>
</html>

Ответ 1

Вам нужно добавить min-width:0 в .middleColumn, если вы хотите разрешить ему сжиматься ниже своей минимальной ширины (внутренняя ширина его <img> -child).

В противном случае он получит новый min-width:auto по умолчанию, который на элементе flex в основном заставит отказаться от сжатия ниже его размера, уменьшенного при сжатии.

(Chrome пока не реализовал min-width:auto. Мне сказали, что IE имеет в своем движке рендеринга следующего поколения, поэтому я 'd ожидать, что версия должна вести себя как Firefox здесь - как и Chrome, как только они реализуют эту функцию.)

Фрагмент с фиксированным:

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
.container {
  width:300px;
}
.flexbox {
  display:flex;
}

.flexbox .column {
  flex:1;
  background-color: red;
}

.flexbox .middleColumn {
  flex:3;
  min-width:0;
}

.flexbox .middleColumn img {
  width:auto;
  height:auto;
  max-width:100%;
  max-height:100%;
  align-self: center;
  display: block;
}
    </style>
  </head>
  <body>
    <div class="container">
      <div class="flexbox">
        <div class="column">This is the left column!</div>
        <div class="middleColumn">
          <img src="http://placehold.it/400/333333">
        </div>
        <div class="column">This is the right column!</div>
      </div>
    </div>
  </body>
</html>

Ответ 2

Я должен признать, что я не уверен, почему, но почему-то в Firefox кажется, что вы должны дать изображению ширину/высоту (то есть нечто иное, чем "авто" ). Наш старый друг 100%, похоже, делает трюк:

.flexbox .middleColumn img {
    width: 100%;
    height: 100%;
    display: block;
}

Вот скрипка, показывающая рабочее решение. Обратите внимание, что я изменил боковые столбцы на flex:2, чтобы сделать результат более очевидным.

Ответ 3

Мне кажется, что это работает со следующим:

.flexbox {
  display:flex;
}
.flexbox .column {
  flex:1 1 0;
  overflow:hidden;
  background-color: red;
}

.flexbox .middleColumn {
  flex-grow:3;
  flex-shrink:3;
}

.flexbox .middleColumn img {
  max-width:100%;
}

настройка flex:1 1 0; для всех столбцов позволяет им одинаково расти и делать это с четного и минимального базиса 0px.

Затем вы переопределяете рост и сжатие на .middleColumn

max-width:100%; требуется как обычно

волшебство кажется overflow:hidden; на предмет сгибания элемента.

другие вещи на изображении не нужны.

Ответ 4

По моему опыту, подход немного отличается, может быть, странным, но он работает. В основном, я фиксирую максимальную ширину до реальной ширины изображения, поэтому она не будет пикселировать и использовать процентную ширину вместо максимальной ширины. Если у вас есть, скажем, контейнер <ul> (flex), ячейки будут:

li{
   flex-grow: 0;
   flex-shrink: 1;
   flex-basis: auto;
   width: 50%; // for example..

   img{
     display: block;
     max-width: [your real img width in px] // instead of 100%;
     width:100%; // instead of max-width
   }
}