w-100仅设宽度不控高度，导致.carousel-item无法撑开、图片比例失衡、文字错位；object-fit:cover必须配合显式宽高或aspect-ratio才生效，否则裁剪失控或留白。
为什么 w-100 不够用？
Bootstrap 的 w-100 类只强制图片宽度占满容器，但对高度完全放任——图片原始比例各异，height: auto 在绝对定位的 .carousel-item 里根本无法撑开父容器，结果就是：轮播区域忽高忽低、文字被顶出视口、小屏下图片拉伸变形。
object-fit: cover 必须配合显式尺寸
object-fit 不是“自动适配”，它只在父容器有明确宽高时才生效。直接给 <img> 加 object-fit: cover 而不设容器约束，浏览器仍按默认行为渲染。
- 给
<img>加类（如carousel-image），并设width: 100%; height: 100% - 给外层容器（如
.carousel-inner或.carousel-item）加aspect-ratio: 16/9（现代浏览器）或 fallback 用padding-bottom: 56.25%+position: relative - 避免同时写
height: 100%和max-height: 400px，后者会被忽略
小屏下图片裁剪失控怎么办？
当轮播图在手机上高度骤降，object-fit: cover 会从图片中心裁剪，但若原始图是竖构图（比如 4:5），可能关键内容（人脸、标题）直接被切掉。
- 优先统一素材宽高比（如全部提供 16:9 横图），这是最稳解法
- 若必须混用横/竖图，改用
object-fit: contain+background-color填充留白，再用min-height锚定容器 - 慎用
background-image替代<img>：轮播控制、懒加载、SEO 全部失效
自定义样式不生效的隐蔽原因
常见错误不是写错 CSS，而是选择器没命中或加载顺序错位。
- 确保类名拼写完整：
.carousel-item≠.c-item；.carousel-image要真正在<img>的class属性里出现 - 自定义 CSS 文件必须放在 Bootstrap CSS
<link>之后，否则被重置规则覆盖 - 检查开发者工具的 Computed 面板——如果
object-fit显示为initial，说明样式根本没应用，先查选择器和加载顺序
真正难的不是写几行 CSS，而是让每张图在不同设备上都“看起来刚刚好”：既不拉伸、不溢出、不跳动，又不牺牲关键信息。这需要你同时控制容器比例、图片缩放行为、以及加载时的占位逻辑——缺一不可。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
