Chrome中grid-template-rows:1fr下图片溢出固定尺寸网格问题

AI 小北

2026-8-29

Chrome下固定尺寸单行单列网格内图片溢出问题

场景说明

我有一个仅含单行单列的固定尺寸网格（示例尺寸为宽300px、高100px），需要在网格内放置一张覆盖整个网格区域的图片。该单独用例是使用嵌套网格开发图片画廊时，对观测到的异常问题做范围缩小后得到的最小复现场景。

异常表现

为网格设置grid-template-rows: 1fr时，受网格与图片的尺寸影响，部分场景下图片会在Chrome浏览器中溢出网格区域，但Firefox浏览器中无该异常，不同网格、图片尺寸组合的测试结果可参考对应测试截图。
如果将grid-template-rows设置为1fr 1fr，或是设置为100px这类固定尺寸值，图片不会出现溢出；当网格尺寸为非固定值时，也无溢出问题。
注意：如果网格高度大于宽度，无论图片自身的宽高比为多少，都不会出现溢出。
已搭建对比测试用例，覆盖固定尺寸网格、流式尺寸网格、普通固定尺寸div三类容器，搭配正方形、宽大于高矩形、高大于宽矩形三种比例的测试图片，可验证不同参数组合下的渲染表现。

复现代码

HTML 片段

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

对应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;
}