Grid布局中Safari与Firefox图片高度差异问题咨询

问题根源 #

Safari 对 CSS Grid 中 min-content 行高的计算逻辑与 Firefox 存在差异，针对图片元素，它会错误地将浏览器视口高度作为默认高度，导致图片被裁切且滚动冗余。

具体实现方案 #

1. 修正 Grid 行规则
   将 Grid 容器的行高设置为 minmax(0, min-content)，既保证空行高度收缩为 0，又让包含内容的行自适应高度，同时规避 Safari 的视口高度默认值问题：

   .image-grid {
     display: grid;
     grid-template-columns: repeat(15, 1fr);
     grid-auto-rows: minmax(0, min-content);
     gap: 1rem; /* 可根据需求调整间距 */
   }
   

2. 为图片设置固定比例
   针对图片所在的 Grid 项，通过 aspect-ratio 定义图片的宽高比例，让 Safari 和 Firefox 统一按比例计算高度，同时配合 object-fit 保证图片显示效果：

   /* 示例：跨3列的图片项 */
   .image-item {
     grid-column: span 3;
   }
   
   .image-item img {
     width: 100%;
     height: auto;
     aspect-ratio: 16/9; /* 根据你的图片实际比例设置，比如正方形用 1/1 */
     object-fit: cover; /* 保持比例并填满容器，如需完整显示图片改用 contain */
   }
   

3. 适配折叠面板
   折叠面板所在的 Grid 项无需额外限制高度，minmax(0, min-content) 会自动适配其展开/收起时的高度，避免超出 Grid 范围导致页脚错位：

   .accordion-item {
     grid-column: span 15; /* 占满全部列宽 */
   }
   

灵活扩展 #

如果图片比例不固定，可以通过自定义属性动态设置：

<img src="your-image.jpg" data-ratio="4/3">

.image-item img {
  aspect-ratio: attr(data-ratio);
}

内容的提问来源于stack exchange，提问作者gvgnumber1