优先用 object-fit: cover；因轮播图设固定高度后图片默认拉伸变形，需在 img 标签上显式设置 object-fit: cover 并配合 d-block、w-100、h-100 及明确父容器高度，才能保持比例、填满容器且避免留白或跳动。
轮播图高度固定后图片被拉伸？优先用 object-fit: cover
直接结论：Bootstrap轮播图设固定高度（比如 height: 500px 或 vh-100）后，<img> 默认会按 object-fit: fill 行为拉伸变形。必须显式覆盖该行为，否则所有图片都会糊、胖、瘦、歪。
关键点在于：object-fit 只对具有明确宽高尺寸的容器生效。轮播项（.carousel-item）本身是 position: relative 且无固有尺寸，所以不能直接在它上面写 object-fit；真正要加的地方是 <img> 标签本身。
-
<img>必须有明确的width和height（或至少一个），否则object-fit不起作用 —— Bootstrap 的w-100+h-100类可满足这点 -
cover是轮播图最常用值：填满容器、保持比例、允许裁剪 —— 适合封面图、宣传图等强调视觉完整性而非内容全貌的场景 - 别漏掉
display: block（或用d-block），否则图片下方可能多出空白间隙（行内元素默认 baseline 对齐导致）
为什么 object-fit: contain 在轮播图里容易出问题
它会让图片完整显示，但代价是留白 —— 轮播图区域顶部/底部出现大片空白，破坏视觉节奏。尤其当图片原始比例差异大时（比如一张 4:3、一张 16:9），每张图的留白位置和大小都不一致，.carousel-caption 文字定位会飘。
典型症状包括：
- 文字标题忽高忽低，无法稳定居中
- 轮播切换时，图片“跳动”明显（因每次缩放比例不同）
- 移动端上留白占屏比过大，有效内容区域被压缩
除非你明确要求每张图都 100% 可见（如医疗影像预览、合同扫描件轮播），否则不要在轮播图中用 contain。
Bootstrap 5 中正确写法示例（含常见坑）
以下是最小可行配置，已避开高频错误：
<div class="carousel-item active">
@@##@@
<div class="carousel-caption d-none d-md-block">
<h3>标题</h3>
</div>
</div>
注意这几点：
-
h-100必须配合父容器有明确高度（如.carousel设了height: 60vh），否则h-100无效 -
object-position: center显式声明，避免某些浏览器默认偏左上导致关键内容被裁 - 不要给
<img src="cover.jpg" class="d-block w-100 h-100" style="max-width:90%" alt="封面">加max-width: 100%或img-fluid—— 它们会干扰h-100的计算逻辑 - 如果轮播图嵌套在
col或container内，确认这些父级没意外设置overflow: hidden，否则裁剪部分可能被截断
移动端适配时 object-fit 失效？检查这个前提
object-fit 在所有现代浏览器（包括 iOS Safari 13.4+、Android Chrome）都支持，但前提是图片加载完成前，容器尺寸必须已确定。轮播图常见失效场景是：
- 图片异步加载（如 Angular 的
*ngIf或 React 的 lazy loading）导致初始渲染时<img>尺寸为 0×0 - 使用了
background-image替代<img>标签 ——object-fit对背景图完全无效 - CSS 中写了
height: auto覆盖了h-100，或者用了min-height却没配height
验证方式：打开 DevTools，选中 <img> 元素，在 Styles 面板确认 computed height/width 不为 0，且 object-fit 值已生效。若未生效，回溯父容器的尺寸链，而不是怀疑属性本身。
最常被忽略的是：轮播图高度依赖视口单位（如 vh）时，iOS Safari 在地址栏收起/展开时会触发视口重算，但不会重绘 object-fit 行为 —— 此时需监听 resize 并强制重排（例如 toggle class），否则首屏加载后滚动时图片突然错位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
