只加img-fluid无法解决画廊错位、拉伸或留白，因其仅实现单图等比缩放（max-width:100%;height:auto），不控制容器尺寸、不约束裁剪方式、不处理多图间隙；object-fit:cover必须配合明确高度的容器才生效，否则父容器仍被原始图片撑开导致网格塌陷。
为什么只加 img-fluid 画廊还是错位、拉伸或留白？
因为 img-fluid 只解决单图等比缩放（max-width: 100%; height: auto），它不控制容器尺寸、不约束图片裁剪方式、也不处理多图并排时的间隙和对齐。当图片原始宽高比差异大（比如横图混着竖图），直接塞进 .col-md-4 容器里，就会出现高度不一、底部错位、留白严重等问题。
object-fit: cover 必须配合固定高容器才生效
单独给 <img> 加 object-fit: cover 没用——浏览器仍按图片原始尺寸撑开父容器，导致网格塌陷。必须让父容器有明确高度（哪怕只是 min-height 或 height），object-fit 才能真正裁切居中显示。
- 推荐写法：
<div class="position-relative" style="height: 200px;"><img src="..." class="w-100 h-100 object-fit-cover"></div> - Bootstrap 5+ 可直接用工具类：
h-100+w-100+object-fit-cover（需确认 CSS 已启用该工具类，部分精简版未包含） - 别用
height: 100%而不设父级高度——这是最常被忽略的死循环 - 如果内容区域需文字叠加（如标题/按钮），
position-relative是必须的，否则position-absolute子元素会脱标错位
栅格断点与 object-fit 的协同要点
不同断点下容器宽度变化，但图片裁剪逻辑不能跟着“变规则”。固定裁剪行为反而更可控，关键在选对断点组合和容器高策略。
- 手机优先：用
.col-12 .col-md-6 .col-xl-3，避免.col-sm-6在窄屏 iPhone 上强行两列压扁图片 - 容器高度建议用
vh或固定值（如200px），别用flex: 1或min-height: 100%—— 后者在 flex 容器里容易失效 - 如果画廊项含标题/描述，统一用
h-100 d-flex flex-column包裹内容区，再用flex-grow-1让图片占满剩余空间 - 注意 Safari 旧版本不支持
object-fit：可加降级样式img { font-size: 0; }防止行内间隙，或用 background-image 替代（但失去alt和 SEO）
常见报错：Failed to resolve module 或图片不渲染
这通常不是布局问题，而是资源加载链断裂。尤其当你把 object-fit-cover 和懒加载、异步图片路径混用时。
-
loading="lazy"在画廊里慎用：模态框打开前就懒加载缩略图没问题，但若缩略图本身是 JS 动态插入的，loading="lazy"可能触发多次重绘，导致object-fit未及时应用 - 路径拼错：后端返回相对路径如
"uploads/photo.jpg"，但 HTML 在子目录下打开，<img src>就 404；必须确保src是完整 URL 或根相对路径（/uploads/...） - CSS 未加载：自定义
object-fit-cover类若写在独立 CSS 文件里，而该文件未引入或被缓存旧版，就会失效；建议直接用 Bootstrap 内置类或内联style="object-fit: cover;"快速验证 - 检查 DevTools 的 Elements 面板：右键图片 → “Edit as HTML”，确认
class和style确实存在且未被覆盖
object-fit 生效前提」这两层依赖关系——它们不像 class 名那样显眼，却决定整个画廊是否稳定。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
