0

I have a fixed-size grid - say width:300px,height:100px with just one row and column. I want to place an image in that grid that covers the entire grid. By itself this use case seems pointless but I narrowed it down from an issue I observed when trying to create an image gallery using nested grids.

Issue:

If I set grid-template-rows:1fr on the grid, depending on the size of the grid and image, in some cases the image overflows the grid in Chrome but not in Firefox. Here are some grid and image size combinations I tried.

If I set grid-template-rows: 1fr 1fr or a fixed size like 100px, the image doesn't overflow.

There is no overflow when the grid size is not fixed.

Interestingly, if the height of the grid is longer than the width, there is no overflow regardless of the height:width ratio of the image.

I have a codepen where I compared the behavior of fixed size grid with fluid size grid and simple fixed-size div. I have links of 3 images : square, rectangle - w>h and h>w to try different combinations.

Relevant HTML snippet:

<div class='fixed-grid'>
   <img src='image1.jpg' alt='Image'>
</div>

Corresponding CSS:

 .fixed-grid {
      width:300px;
      height:100px;
      /* overflow: hidden; */
      display: grid;
      grid-template-rows: 1fr;
      grid-template-columns: 1fr;
      border:5px solid goldenrod;
    }

  img{
      object-fit: cover;
      width:100%;
      height:100%;
      grid-column: 1/-1;
      grid-row: 1/-1;
    }

Any ideas why the overflow should happen only in Chrome and how to fix/avoid it?

Thanks.

Bakul Mukherjee
  • 1

0 Answers0