Chromium与Safari嵌套网格元素尺寸差异：合规性及Bug追踪问询

AI 小北

2026-6-15

网格布局下图片宽度的浏览器兼容性问题

当网格容器设置justify-items: center，其子容器内的图片同时配置object-fit: contain和width: 100%时，Chromium/Firefox与Safari的图片宽度表现不一致，现针对以下两个问题进行解答：

哪种浏览器的表现符合CSS规范要求；
是否存在记录该行为差异的Bug追踪议题。

代码示例

CSS代码

#grid {
  display: grid;
  justify-items: center;
}

img {
  width: 100%;
  height: 300px;
  object-fit: contain;
  background: red;
}

HTML代码

<div id="grid">
  <div id="container">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bd/Test.svg/620px-Test.svg.png">
  </div>
</div>

表现对比图

Chromium与Safari表现对比图

问题解答

1. 规范符合性判断

根据CSS Grid Layout和CSS Images规范的相关规则：

当网格容器设置justify-items: center时，网格项（即示例中的#container）的justify-self属性被设为center，其宽度默认值为auto，尺寸由内部内容的首选宽度决定。
图片设置width: 100%时，该百分比相对父容器#container的宽度计算，此时形成循环依赖：父容器宽度依赖图片宽度，图片宽度依赖父容器宽度。

针对这类循环依赖，规范明确要求以图片的固有宽度作为参考基准，先确定父容器#container的宽度等于图片固有宽度，再让图片以100%宽度继承该值，最终图片保持固有宽度并在网格容器中居中显示。

Chromium和Firefox的表现符合上述规范要求，而Safari中图片拉伸至网格容器宽度的行为不符合规范。