Различная реализация Flexbox в Firefox и Chrome

@TheRuler, Лучшее решение - обернуть тег изображения в div или span, чтобы отобразить изображения в соответствии с Firefox. Firefox также будет работать нормально, если вы оберните изображения в div или span.

Теперь вы можете спросить меня, почему это правильно.

В основном, дисплей flex имеет прикрепленное к нему значение по умолчанию, а именно:

flex-grow: 0
flex-shrink: 1
flex-basis: auto
flex: 0 1 auto /* Shorthand */

Теперь для обоих случаев Firefox и Chrome значение по умолчанию одинаково. Но все же рендеринг в обоих браузерах отличается, особенно в случае изображения как гибкого потомка.

Теперь, кто является правильным является дискуссионным, и кто следуя инструкциям должным образом также спорно.

Если вы посмотрите на спецификацию flex, она говорит, что правила flex должны преобладать над свойствами CSS width и height. Таким образом, в этом случае Firefox сокращает размер изображений, чтобы они соответствовали ему в родительском 600px.

Теперь, если вы видите этот пример,

.container { display: flex; flex-direction: column;}
.container > div { flex: 1; height: 300px;}

<div class="container">
  <div>Single line in Firefox, but 300px tall in Chrome!</div>
</div>

Итак, если вы увидите этот код в обоих браузерах, вы увидите разницу. Chrome определяет свойство высоты дочернего элемента flex, тогда как Firefox его не оценивает. То же самое касается высоты изображения и ширины изображения. Хром не превосходит высоту.

Так как браузер пошел с их собственной реализации, что в данном случае не совпадают друг с другом, и это спорно, который является правильным.

Так что оберните их в span или div, чтобы они работали в обоих браузерах, что должно быть правильным ответом без взлома. Другое решение решит проблему, но это своего рода взлом для решения проблемы.

Пожалуйста, дайте мне знать, если вы получите. Спасибо

Следующий код работает, как и ожидалось, в Firefox

Я не согласен с этим, потому что для меня Chrome ведет себя как ожидалось по 2 причинам:

1. [ 1137] Вы устанавливаете ширину изображения равной 100%, что означает 100% их содержащего блока (контейнера), который определен в 600px. Таким образом, каждое изображение будет 600px

2. Изображение не может сжиматься до размера его содержимого из-за конфигурации min-width по умолчанию (обратите внимание, что при использовании [ 1112] эквивалентно initial в этом случае, так что это как-то бесполезно). Таким образом, изображение будет сохранено в 600px

Если вы добавите min-width:0, изображение будет уменьшаться только по ширине:

[110 ]

<div class="container">
  <img src="https://lundbeckconsulting.no/Temp/illu1.jpg" class="r" />
  <img src="https://lundbeckconsulting.no/Temp/illu1.jpg" class="r" />
  <img src="https://lundbeckconsulting.no/Temp/illu1.jpg" class="r" />
  <img src="https://lundbeckconsulting.no/Temp/illu1.jpg" class="r" />
</div>

Теперь, если мы посмотрим на высоту, вы столкнулись с эффектом stretch, который также не одинаков в обоих браузерах. Объяснить ^{1 немного сложно, но если вы измените выравнивание по умолчанию, вы получите ожидаемый результат в chrome:}

[112 ]

<div class="container">
  <img src="https://lundbeckconsulting.no/Temp/illu1.jpg" class="r" />
  <img src="https://lundbeckconsulting.no/Temp/illu1.jpg" class="r" />
  <img src="https://lundbeckconsulting.no/Temp/illu1.jpg" class="r" />
  <img src="https://lundbeckconsulting.no/Temp/illu1.jpg" class="r" />
</div>

Или, если вы измените высоту, используя процентное значение , вы ошибетесь , а также получите то, что хотите (это немного странно, потому что мы запускают еще одну проблему, чтобы исправить существующую)

.r {
  width: 100%;
  height:658%; /*any value here with %*/
  min-width: 0;
  max-width: 100%;
}

.container {
  display: flex;
  width: 600px;
}

<div class="container">
  <img src="https://lundbeckconsulting.no/Temp/illu1.jpg" class="r" />
  <img src="https://lundbeckconsulting.no/Temp/illu1.jpg" class="r" />
  <img src="https://lundbeckconsulting.no/Temp/illu1.jpg" class="r" />
  <img src="https://lundbeckconsulting.no/Temp/illu1.jpg" class="r" />
</div>

Почему Firefox ведет себя так?

Я не знаю точно, но логичное объяснение состоит в том, что Firefox не рассматривает конфигурацию по умолчанию min-width и отдает приоритет сохранению соотношения, а не эффекта растяжения.

---

^{1 Изначально ваше изображение определяет высоту контейнера, так как оно большое (около 700 пикселей в высоту), эта высота используется контейнером, затем мы примените свойства к нашему изображению, чтобы они сжимались по ширине, и поскольку выравнивание по умолчанию - растяжение, они будут растягиваться до высоты контейнера, которая была первоначально определена их собственной начальной высотой, создавая это рендеринг.}

Если мы удалим эффект растяжения, изображение попытается сохранить их соотношение , так как мы сняли ограничение по высоте.

Та же логика, если мы рассмотрим процентное значение для высоты. Это не удастся auto, и мы вернемся к поведению по умолчанию (сохраняя соотношение сторон)

---

Другая альтернатива

Проблема возникла из-за использование изображения, заменяющего элемент с внутренним размером, где вычисление ширины / высоты не так просто, как для другого элемента.

Чтобы избежать такого поведения, лучше обернуть изображение внутри div и избегать использования их в качестве гибких элементов.

.r {
  width: 100%;
  max-width: 100%;
}

.container {
  display: flex;
  width: 600px;
}

img {
  max-width: 100%;
}

<div class="container">
  <div class="r"><img src="https://lundbeckconsulting.no/Temp/illu1.jpg" /></div>
  <div class="r"><img src="https://lundbeckconsulting.no/Temp/illu1.jpg" /></div>
  <div class="r"><img src="https://lundbeckconsulting.no/Temp/illu1.jpg" /></div>
  <div class="r"><img src="https://lundbeckconsulting.no/Temp/illu1.jpg" /></div>
</div>