轮播图自适应需设容器width: 100%或max-width: 100%，禁用固定像素宽高；图片用max-width: 100%+height: auto防变形，固定尺寸容器中配合object-fit: cover实现等比填充与裁剪。
轮播图容器不能写死 width 像素值
写 width: 1200px 是自适应失败最常见原因。浏览器窗口缩小时，<div class="carousel"> 会横向溢出或触发滚动条。必须让容器「随父级伸缩」：width: 100% 或更安全的 max-width: 100%。
还要检查父容器（比如 <main> 或 <section>）是否本身也用了固定宽度或 min-width 硬限制——这些都会阻断流式传递。
- 删掉所有
min-width（除非你明确需要最小宽度） - 避免在轮播容器上设
height，它应由内容撑开 - JS 轮播逻辑里别缓存
offsetWidth，每次切换前实时读取
<img> 必须用 max-width: 100% + height: auto
只写 width: 100% 会让图片强行拉满、高度卡死原始值，结果不是留白就是溢出；width: 100%; height: 100% 更糟——直接锁死宽高，必然变形。
max-width: 100% 限制宽度不超父容器，height: auto 让浏览器按原始比例自动算高度，这是最稳、兼容性最好、最容易落地的组合。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 加
display: block消除<img>默认的底部空白 - 若需限制最大高度（如弹窗内），可补
max-height: 100%，但依然要保留height: auto - 不要依赖
object-fit单独处理普通<img>—— 它更适合<video>或背景图
固定尺寸容器里用 object-fit: cover 配合显式宽高
当你已给轮播项设了固定尺寸（例如每张图占满视口：width: 100vw; height: 100vh），就该用 object-fit 控制图片怎么“塞”进去。
object-fit: cover 是轮播图首选：保持比例、填满容器、允许裁剪，视觉冲击强；object-fit: contain 适合需要完整展示的场景（如产品图），但四周可能留白。
- 必须先声明
width和height，否则object-fit没作用对象 - 如果父容器是 flex/grid，要防
min-width: auto锁住收缩，加min-width: 0显式释放 - 用
object-position: center可微调焦点，比如竖图想突出人脸，写object-position: 50% 30%
现代方案：用 aspect-ratio 控制容器比例
Chrome 88+、Firefox 89+、Safari 15.4+ 支持 aspect-ratio，它是目前最干净的解法：让容器自己“记住”比例，图片只需填满即可。
例如：.carousel-item { width: 100%; aspect-ratio: 16/9; }，再让图片 width: 100%; height: 100%; object-fit: cover，就能稳定呈现 16:9 区域，不依赖图片原始尺寸。
- 别用
aspect-ratio: attr(width)/attr(height)—— 动态取值支持极差 - IE 和旧版 Safari 不支持，上线前务必查目标用户浏览器分布
- 它和
object-fit是互补关系，不是替代关系：前者管容器形状，后者管图片填充方式
offsetWidth 去计算位移，一缩放窗口，图片就错位。这点比样式更难排查。 
