img-fluid单独使用必然导致拉伸、错行、留白，因其仅设max-width:100%和height:auto，高度由原始宽高比决定；bootstrap 4需用padding-top技巧模拟ratio容器，并配合position-absolute+object-fit或background-image降级实现固定比例。
Bootstrap 4 的 img-fluid 单独用，必然导致拉伸、错行、留白——它只管等比缩放，不管容器比例，必须额外加约束才能真正“不变形”。
为什么 img-fluid 一放进网格就拉伸或高度不一致
img-fluid 的本质是 max-width: 100% + height: auto，它让每张图按自己原始宽高比缩放，但高度完全由图片内容决定。一张 16:9 和一张 1:1 的图塞进同一排 col-4，渲染高度天然不同。
- 结果就是卡片高度参差、悬停层错位、网格“塌陷”或“鼓包”
- 常见干扰：父容器用了
display: flex但没设align-items: flex-start，img被默认stretch垂直撑满，直接压扁比例 - 更隐蔽的坑：HTML 中写了
width="800"或height="600"属性，IE 和部分现代浏览器会优先按这个固有尺寸渲染，覆盖max-width
在 Bootstrap 4 中正确实现固定宽高比（如 16:9）
Bootstrap 4 没有 ratio 类，aspect-ratio 也不支持，必须用传统 padding-top 技巧模拟容器高度。
- 外层容器必须设
position: relative，否则绝对定位的图片会飞出可视区 - 内层
<img>加position-absolute top-0 start-0 w-100 h-100，不能只靠img-fluid - 16:9 对应
padding-top: 56.25%（9 ÷ 16 = 0.5625），4:3 是75%，数值必须精确 - 别给
<img>写height或max-height，会破坏绝对定位的填充逻辑
<div class="position-relative" style="padding-top: 56.25%;"> @@##@@ </div>
如何让图片填满容器又不拉伸（object-fit 兼容写法）
IE 11 及更早版本完全不识别 object-fit，Bootstrap 4 场景下不能依赖它；但现代浏览器可用，需配合降级方案。
- 先确认是否真需要
object-fit：如果是封面图、轮播缩略图，用object-fit: cover；证件照、图标类用object-fit: contain - 仅加
object-fit: cover无效——必须确保容器有可计算高度，比如上面padding-top容器已提供 - IE 兼容 fallback 只有一个可靠路径：
background-image+background-size: cover，但会丢失alt、SEO、懒加载 - 不要混用：别在同一个
<img src="photo.jpg" class="position-absolute top-0 start-0 w-100 h-100">上既写src又写background-image，IE 会忽略后者
最容易被忽略的加载前布局抖动问题
浏览器对未加载图片的 intrinsic size 推算不准，height: auto 在首帧可能暂时失效，导致卡片高度突然塌陷再撑开，用户体验断裂。
-
padding-top技巧天然规避这个问题——伪高度在 HTML 解析阶段就已生效 - 如果坚持用
<img>标签，aspect-ratio不是选项（Bootstrap 4 不支持），sizes+srcset也救不了布局抖动 - 最轻量解法：给外层容器加
min-height（如min-height: 200px），配合img-fluid，虽不完美但比抖动强
真正的难点不在写哪条 CSS，而在于判断当前环境是否允许用 object-fit、是否必须兼容 IE、以及能否接受语义损失——选错路径，后面所有样式都是在补漏洞。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
