问题解析：图片为何“不听话”？
在使用css grid布局时，我们通常会利用grid-template-rows属性配合fr（fraction）单位来定义网格行的高度比例，例如grid-template-rows: 3fr 2fr;旨在创建一个3:2比例的两行布局。然而，当网格单元中包含图片时，我们可能会发现图片并不总是尊重这些定义的行高，而是倾向于保持其原始尺寸，从而导致网格布局失效或溢出。
造成这一问题的主要原因在于图片的特性。图片（<img>元素）是一种替换元素（replaced element），其尺寸通常由其固有尺寸决定。即使我们尝试使用object-fit: contain来让图片在保持宽高比的同时缩放以适应其容器，或者将图片包裹在一个div中，这些方法往往也无法根本解决问题。这是因为在正常的文档流中，图片（或其直接父容器）的固有尺寸仍然会影响其在网格单元中占据的空间，进而“撑开”网格行，使其超出grid-template-rows所定义的限制。简而言之，网格单元的高度被内部图片的内容所决定，而非网格本身所分配的高度。
解决方案：利用绝对定位强制图片适应
要强制图片遵循网格行高约束，我们需要采取一种策略，让网格单元的高度首先按照grid-template-rows的定义进行渲染，然后让图片去适应这个已确定的高度。实现这一目标的关键在于结合使用position: relative和position: absolute。
核心思路是：
- 将包含图片的网格单元（即图片的直接父元素）设置为position: relative。这为其子元素提供了定位上下文。
- 将图片本身设置为position: absolute。这将使图片脱离正常的文档流，从而不再影响其父容器（网格单元）的尺寸计算。此时，网格单元的高度将完全由grid-template-rows定义。
- 设置绝对定位的图片height: 100%和width: 100%，使其填充其相对定位的父容器。
- 保留object-fit: contain，以确保图片在填充容器时能保持其宽高比，避免变形。
通过这种方法，网格单元的高度将严格按照grid-template-rows的定义来分配，而图片则会“浮动”在这个已确定高度的单元格内部，并被强制缩放以适应其空间。
立即学习“前端免费学习笔记（深入）”；
示例代码
以下是应用上述解决方案的完整代码示例：
HTML 结构：
<div class="container">
<!-- 第一个网格单元，包含图片 -->
<div class="image-wrapper">
<img src="http://via.placeholder.com/600x300" alt="Placeholder Image" />
</div>
<!-- 第二个网格单元，包含其他内容 -->
<div class="hello">
<div>Hello</div>
<div>Hello</div>
<div>Hello</div>
<div>Hello</div>
<div>Hello</div>
<div>Hello</div>
</div>
</div>CSS 样式：
.container {
display: grid;
/* 定义单列布局 */
grid-template-columns: repeat(1, minmax(0, 1fr));
/* 定义两行，比例为3:2 */
grid-template-rows: 3fr 2fr;
/* 容器高度设置为视口高度 */
height: 100vh;
/* 可选：添加边框以便观察网格边界 */
border: 2px solid blue;
}
/* 图片的直接父容器（网格单元） */
.image-wrapper {
/* 设置相对定位，为内部的绝对定位图片提供上下文 */
position: relative;
/* 可选：添加边框以便观察网格单元边界 */
border: 1px dashed red;
}
/* 图片本身 */
.image-wrapper img {
/* 脱离文档流，不再影响父容器高度 */
position: absolute;
/* 填充父容器的宽度 */
width: 100%;
/* 填充父容器的高度 */
height: 100%;
/* 保持图片宽高比，并在容器内居中显示 */
object-fit: contain;
/* 可选：添加背景色以便观察图片未覆盖区域 */
background-color: lightgray;
}
/* 第二个网格单元的样式 */
.hello {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 5px; /* 添加间距 */
background-color: lightgreen; /* 添加背景色 */
padding: 10px;
}
.hello div {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 10px;
text-align: center;
}通过上述CSS规则，第一个网格单元（.image-wrapper）的高度将严格按照3fr的比例计算，而内部的图片则会完美地缩放并适应这个空间，从而实现预期的3:2行高布局。
注意事项与最佳实践
- 理解position: absolute的影响： position: absolute会将元素从正常的文档流中移除。这意味着如果网格单元中除了图片还有其他内容，这些内容可能会被绝对定位的图片覆盖，或者它们会像图片不存在一样进行布局。因此，这种方法最适用于图片是网格单元中唯一或主要内容的情况。
- 定位上下文的重要性： 务必确保图片的直接父容器（即网格单元）设置为position: relative。如果父容器没有设置相对定位，绝对定位的图片将相对于最近的已定位祖先元素（或者初始包含块，通常是body）进行定位，这会导致不可预测的布局结果。
- object-fit的持续作用： 即使图片被绝对定位并强制填充容器，object-fit: contain仍然是至关重要的。它确保图片在被强制缩放时能保持其原始宽高比，避免图片失真变形。如果不需要保持比例，可以使用object-fit: fill。
- 可访问性考虑： 对于所有图片，alt属性都是必不可少的，用于提供图片内容的文字描述，提高可访问性。
- 性能： 频繁地调整图片大小可能会对性能产生轻微影响，但在现代浏览器中通常不是问题。
总结
在CSS Grid布局中，当图片不按预期尊重grid-template-rows定义的行高时，这通常是由于图片作为替换元素的固有尺寸特性所致。通过巧妙地结合使用position: relative在图片父容器上和position: absolute在图片本身上，我们可以将图片从文档流中移除，让网格单元的高度由Grid布局自身决定，然后强制图片填充这个已确定的空间。配合height: 100%、width: 100%和object-fit: contain，即可实现图片在Grid布局中响应式地适应行高约束，构建出更加灵活和可控的页面布局。
