CSS Grid中文本导致图片尺寸不一致问题求助

问题核心 #

你的Grid布局没有指定列和行的固定轨道尺寸，Grid会默认根据单元格内的文本内容自动调整轨道大小，导致图片所在容器的尺寸被拉伸，最终出现图片大小不一致的情况。

解决方案 #

直接给Grid设置明确的轨道尺寸，同时固定图片的自适应规则：

1. 给Grid容器添加固定的列、行尺寸
   修改.team-members的CSS，添加grid-template-columns和grid-template-rows，让两行两列的轨道大小均等：

   .team-members {
     width: 70%;
     display: grid;
     grid-template-areas: "name1 ." "name2 name3";
     /* 新增：指定两列等宽，两行等高 */
     grid-template-columns: 1fr 1fr;
     grid-template-rows: 1fr 1fr;
     gap: 30px;
   }
   

2. 让图片自适应容器并保持比例
   给.team-img添加样式，确保图片填满容器且不变形：

   .team-member .team-img {
     box-shadow: 10px 10px #7CE04E;
     border: 2px solid black;
     /* 新增：图片自适应容器，保持比例 */
     width: 100%;
     height: 100%;
     object-fit: cover;
   }
   

3. 确保图片区域占满Grid单元格
   给图片的父容器添加高度100%，避免文本挤压图片区域：

   .team-member > div {
     height: 100%;
   }
   

修改后的完整CSS代码 #

.team {
  padding: 66px 0 80px 0;
  background-image: url("assets/pattern-team.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  width: 100%;
}

.team .container {
  display: flex;
}

.team-heading {
  width: 30%;
  margin-right: 80px;
}

.team-heading p {
  margin-top: 17px;
}

.team-members {
  width: 70%;
  display: grid;
  grid-template-areas: "name1 ." "name2 name3";
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 30px;
}

.name1 {
  grid-area: name1;
}

.name2 {
  grid-area: name2;
}

.name3 {
  grid-area: name3;
}

.team-member {
  cursor: pointer;
}

.team-member > div {
  height: 100%;
}

.team-member .team-img {
  box-shadow: 10px 10px #7CE04E;
  border: 2px solid black;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.team-member h4 {
  margin: 15px 0 5px 0;
}

.team img {
  display: block;
}

这样修改后，Grid的轨道大小固定，图片会自适应填满容器并保持比例，不管下方有没有文本，图片尺寸都会一致，同时网格整体保持占容器70%宽度的要求。

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