图片高度：Chrome中为0，但Firefox中为0

Question

我正在尝试做一个网格示例并覆盖多张图像。

但是问题是，在Firefox中，当我设置图像时，图像占据了100％的高度；在Chrome中，图像的高度为0，作为黑客，我必须将一个图像设置为自动。

.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浏览器没有看到容器的高度，然后将子代的高度计算为0的100％。因此容器崩溃了。

另一方面，Firefox会影响图像的固有高度。

您可以在此处了解有关此问题的更多信息：Chrome / Safari not filling 100% height of flex parent

还要注意，在网格容器上有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>