图片尺寸不一致致object-fit失效，网格布局排版异常求助

问题根源 #

你的Grid布局错乱核心原因是没有给图片容器和Grid轨道设置严格的尺寸约束：

• 非正方形图片的原始宽高比会直接撑大对应的Grid项，进而打乱整个Grid的轨道尺寸分配——比如你设置的两列并排布局，会因为某一列被竖图/长图撑宽/高，导致另一列跟着变形。
• object-fit: contain失效是因为它需要图片被限制在固定尺寸的容器内才能生效；如果容器本身没有尺寸约束，图片会按原始尺寸渲染，容器跟着图片缩放，object-fit自然起不到作用。
• 加!important没用是因为问题根本不是CSS优先级冲突，而是布局逻辑缺少尺寸限制。

解决步骤 #

1. 给Grid容器明确轨道约束

给Grid轨道设置固定的列宽规则，同时限制最大/最小尺寸，避免被内容撑变形：

.project-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(280px, 1fr)); /* 两列，每列最小280px，最大平分可用空间 */
  gap: 1.5rem; /* 可选，添加项间距提升可读性 */
}
/* 第三个文本tile跨两列 */
.project-text {
  grid-column: 1 / -1;
}

2. 给图片容器和图片设置尺寸约束

强制图片容器保持统一比例（比如作品集常用的正方形），再让图片填充容器：

.project-image-container {
  width: 100%;
  aspect-ratio: 1 / 1; /* 强制容器为正方形，可根据需求调整为其他比例 */
  overflow: hidden; /* 裁剪超出容器的图片部分 */
}

.project-image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 图片覆盖容器，保持比例并裁剪多余部分；用contain则会完整显示图片，容器留空白 */
}

3. 检查Grid项的对齐属性

确保Grid项不会被强制拉伸，避免容器变形：

.grid-item {
  align-self: start; /* 项从顶部开始排列，不拉伸填充轨道高度 */
}

这样不管图片原始尺寸是正方形、竖图还是横图，容器都会保持统一比例，Grid轨道尺寸稳定，布局就不会错乱了。

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