时间戳

首页 > 解决方案 > 图片的高度：Chrome 中为 0，但 Firefox 中没有

html - 图片的高度：Chrome 中为 0，但 Firefox 中没有

问题描述

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

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

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

有人可以帮助如何在没有任何黑客的情况下做到这一点吗？

代码笔： 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>

标签： htmlcsscss-grid

解决方案

img元素height: 100%有。

在此处输入图像描述

好的，但是height: 100%什么？父级没有定义高度。

Chrome 看着容器并没有看到高度，然后将孩子的高度计算为 0 的 100%。因此容器崩溃了。

另一方面，Firefox 会考虑图像的内在高度。

您可以在此处了解有关此问题的更多信息：Chrome / Safari not fill 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>

推荐阅读