图片在Chrome中的高度为0，但在Firefox中没有

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>

​