Изображения имеют высоту: 0 в Chrome, но не Firefox

Question

Я пытаюсь сделать пример сетки и наложить несколько изображений.

Но проблема в том, что в Firefox изображения занимают 100% высоты, когда я его устанавливаю, в Chrome - 0, так что взломать мне нужно установить одно изображение на auto.

.image-1 { 
  height: auto; /* <-- this part on Chrome*/
  grid-column: 4 / span 4;
  grid-row: 1 / span 4;
}

Может ли кто-нибудь помочь, как это сделать без всяких взломов?

Codepen: https://codepen.io/adtm/pen/GXrLrG

body {
  width: 1024px;
  margin: 40px auto;
}

section {
  display: grid;
  grid-auto-rows: 1fr;
  grid-template-columns: repeat(10, 1fr);
}

img {
  border: 1px solid red;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-1 {
  height: auto;  /* <-- this part on Chrome*/
  grid-column: 4 / span 4;
  grid-row: 1 / span 4;
}

.image-2 {
  grid-column: 1 / span 4;
  grid-row: 3 / span 4;
}

.image-3 {
  grid-column: 4 / span 4;
  grid-row: 5 / span 3;
}

.image-4 {
  grid-column: 6 / span 4;
  grid-row: 3 / span 4;
}

<section>
  <img src="https://via.placeholder.com/200x150" alt="1" class="image-1">
  <img src="https://via.placeholder.com/350x350" alt="2" class="image-2">
  <img src="https://via.placeholder.com/150x150" alt="3" class="image-3">
  <img src="https://via.placeholder.com/350x250" alt="4" class="image-4">
</section>

Answer 1

Элементы img имеют height: 100%.

Хорошо, но height: 100% чего? Родитель не имеет определенной высоты.

Chrome смотрит на контейнер и не видит высоты, затем вычисляет высоту дочерних элементов до 100% от 0. Следовательно, контейнер разрушается.

Firefox, с другой стороны, учитывает внутреннюю высоту изображений.

Подробнее об этой проблеме вы можете узнать здесь: Chrome / Safari не заполняет 100% высоты родительского элемента flex

Также обратите внимание, что в вашем сеточном контейнере есть grid-auto-rows: 1fr. С устройством fr вы распределяете свободное пространство. Тем не менее, высота контейнера не определена. Таким образом, нет свободного места для распространения.

Попробуйте полностью избежать этой проблемы, установив высоту контейнера.

section {
  display: grid;
  grid-auto-rows: 1fr;
  grid-template-columns: repeat(10, 1fr);
  height: 75vh;   /* for demo */
}

img {
  border: 1px solid red;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-1 {
  grid-column: 4 / span 4;
  grid-row: 1 / span 4;
}

.image-2 {
  grid-column: 1 / span 4;
  grid-row: 3 / span 4;
}

.image-3 {
  grid-column: 4 / span 4;
  grid-row: 5 / span 3;
}

.image-4 {
  grid-column: 6 / span 4;
  grid-row: 3 / span 4;
}

body {
  width: 1024px;
  margin: 40px auto;
}

<section>
  <img src="https://via.placeholder.com/200x150" alt="1" class="image-1">
  <img src="https://via.placeholder.com/350x350" alt="2" class="image-2">
  <img src="https://via.placeholder.com/150x150" alt="3" class="image-3">
  <img src="https://via.placeholder.com/350x250" alt="4" class="image-4">
</section>