图片与文本框等高最可靠方案是flex布局：父容器设display: flex，子项设flex: 1和min-height: 0；图片用width: 100%; height: 100%; object-fit: cover，并外层包裹溢出隐藏容器。
图片和文本框等高，靠 height: 100% 不行
直接给 img 和文本容器都设 height: 100% 几乎总失败——它依赖父元素有明确高度，而响应式布局中父容器往往用 max-width 或 flex，高度是内容驱动的，没有“100% 是多少”这个参照。更麻烦的是，img 是替换元素，其默认行为不参与 flex/grid 的等高对齐逻辑，除非显式干预。
用 Flex 布局让子项自动拉齐高度
最可靠的做法是把图片和文本框放进同一个 display: flex 容器，并让它们成为 flex 项目：
- 给父容器加
display: flex; align-items: stretch;（stretch是默认值，可省略） - 确保图片有
max-width: 100%; height: auto;，避免原始尺寸撑开容器 - 文本框加
min-height: 0;（尤其当它是 flex 子项时，防止min-width: auto干扰高度计算） - 若需图片不拉伸变形，可在其外层再包一层
div，并设overflow: hidden;+object-fit: cover;（此时必须给该外层设明确宽高）
示例关键 CSS：
.flex-row {
display: flex;
gap: 1rem;
}
.text-box, .img-wrapper {
flex: 1;
min-height: 0;
}
.img-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
}
Grid 布局下等高更简单但要注意轨道定义
Grid 天然支持等高，但容易踩坑在轨道设置上：
- 用
grid-template-rows: 1fr;让行高由内容最多的一项决定，其他自动撑满 - 避免写
minmax(300px, 1fr)这类限制最小高度的轨道，小屏下会强制留白、破坏等高 - 图片仍需
width: 100%; height: 100%; object-fit: cover;，且其父容器（即 grid item）必须设min-height: 0;，否则 grid 项可能拒绝收缩 - 如果文本内容极少，想让图片高度“压下来”，就得放弃等高，改用
align-items: start;或显式设min-height
等高 ≠ 视觉对齐，图片缩放方式决定最终效果
即使高度拉齐了，object-fit 的取值会极大影响观感：
-
object-fit: cover;：等比缩放后裁剪填满，适合封面图；但需确保容器宽高比稳定，否则裁剪区域不可控 -
object-fit: contain;：等比缩放后完整显示，留白；适合产品图，但留白位置（上下 or 左右）受容器宽高比影响 - 不用
object-fit而用max-width: 100%; height: auto;时，图片高度由宽度推导，无法强制等高——这时只能接受“高度不一致”，或改用背景图方案
真正卡住人的地方不是怎么写 CSS，而是没意识到：等高布局的前提是容器尺寸可控、替换元素行为可约束、且你愿意为不同设备接受不同的裁剪或留白策略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
