Зарегистрируйте несколько блоков к GAC в Vista

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

blockquote>

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

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

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

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

[110 ]

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

[112 ]

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

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

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

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

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

---

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

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

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

---

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

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

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

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

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

img {
  max-width: 100%;
}