Images have height: 0 in Chrome but not Firefox

Question

I am trying to do a grid example and overlay multiple images.

But the problem is that in Firefox the images take up 100% height when I set it, in Chrome it's 0, as a hack I have to set one image to auto.

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

Could someone help how to do this without any hacks?

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>

rows set to 1fr is obviously not enough, If you set a min-height to section, then chrome has an height to work on and do something for row's height from which height:100% for img will have a meaning https://codepen.io/anon/pen/BOpEmM FF ignores it and uses image to set an height for the rows. — G-Cyrillus, Aug 31 '18 at 20:35

Michael Benjamin · Accepted Answer · 2018-08-31T21:21:08.177

The img elements have height: 100%.

Okay, but height: 100% of what? The parent has no height defined.

Chrome looks to the container and sees no height, then calculates the height of the children to 100% of 0. Hence the container collapses.

Firefox, on the other hand, factors in the intrinsic height of the images.

You can learn more about this issue here: Chrome / Safari not filling 100% height of flex parent

Also note, on your grid container you have grid-auto-rows: 1fr. With the fr unit you are distributing free space. However, there is no height defined on the container. So there is no free space to distribute.

Consider avoiding this problem altogether by setting a height on the container.

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>

Using min-height for the demo shows the difference on how chrome and FF try to handle rows and image height. it can help the op to understand and remember what goes on ;) (link in my average comment below the question) — G-Cyrillus, Aug 31 '18 at 20:58

Images have height: 0 in Chrome but not Firefox

1 Answers1