用 aspect-ratio + object-fit: cover 可锁定图片容器比例，需将 aspect-ratio 设于父容器、img 设 width/height 100% 与 object-fit: cover，并配合 padding-top fallback、分层结构、响应式调整及 HTML 空格清理。
用 aspect-ratio + object-fit: cover 锁定图片容器比例
图片尺寸不一导致卡片高度参差，根本原因不是图本身，而是容器没强制统一宽高比。只设 width: 100% 或 height 属性会拉伸、裁剪失控或留白。
-
aspect-ratio: 4 / 3写在图片父容器（比如.card-img）上，现代浏览器（Chrome 88+、Firefox 89+、Safari 15.4+）直接生效 - 配合
img { width: 100%; height: 100%; object-fit: cover; }，确保内容居中裁剪、填满且不变形 - 旧浏览器兼容必须 fallback：用
padding-top: 75%（对应 4:3）撑高容器，再用position: absolute定位图片
卡片结构要分层，别让文字影响图片容器高度
常见错误是把 img 和文字都塞进同一个 flex/grid 容器里，结果文字行数一变，整个卡片高度就浮动，图片比例跟着“失守”。
- 图片单独包一层容器（如
<div class="card-image"><img></div>），该容器只负责维持比例，不参与文字流 - 文字区域用
flex-direction: column或grid-template-rows独立控制，避免和图片共享同一行高计算逻辑 - 如果卡片整体用
display: grid，推荐写成grid-template-rows: auto 1fr，让图片占固定比例区域，文字区域自适应但不挤压图片
响应式断点下 aspect-ratio 值要动态调整
4:3 在桌面端合适，但手机竖屏时可能太窄；1:1 又容易让头像显得臃肿。硬写死一个值，在不同设备上反而破坏一致性。
- 用媒体查询切换
aspect-ratio：@media (max-width: 768px) { .card-image { aspect-ratio: 1 / 1; } } - 若需更精细控制（比如平板横屏用 16:9），可配合 CSS 自定义属性：
--ar: 4/3，然后aspect-ratio: var(--ar) - 注意 Safari 15.4 之前不支持
aspect-ratio，iOS 15.2 及以下用户仍需 padding-top fallback
别忽略 HTML 源码里的换行和空格
即使样式全对，<div class="card-image">\n <img>\n</div> 中的换行符会被解析为一个空格，可能让 inline-block 或未重置的容器产生不可见间隙，间接影响高度对齐。
立即学习“前端免费学习笔记（深入）”；
- 压缩 HTML 或删掉 img 标签前后换行（写成
<div><img></div>）最干脆 - 或者给父容器设
font-size: 0，子元素内再设回正常字号——但仅适用于纯布局容器，慎用于含文本的上下文 - 如果用了
display: grid或flex，这个间隙影响小，但仍建议清理，尤其当卡片外边距敏感时
aspect-ratio 的声明式约束比 JS 计算高度更可靠，但必须配好 fallback 和容器隔离。 
