轮播图图片尺寸失控主因是容器未设高度且图片缺height: auto；须显式设置.swiper高度、img加height: auto，响应式需srcset+sizes，vertical模式下spacebetween计入总高。
轮播图里图片尺寸失控，90% 是因为容器没设高、图片没加 height: auto，而不是图片本身写错了 width。
轮播容器必须显式设置 height
浏览器不会自动给 .swiper 或 .carousel 这类 JS 轮播外层容器分配高度——它默认按内容撑开，而 JS 滑动逻辑又依赖固定高度做计算。结果就是：图片被拉伸、上下留白、切换错位。
- Swiper 必须写
.swiper { height: 400px; }（或50vh），不能只靠width: 100% - 纯 CSS 轮播（如 flex + animation）也一样：外层
#container需固定height，否则overflow: hidden失效，图片溢出 - 用
%或vw/vh比用px更安全，但前提是父级有可计算高度（比如body没设min-height，100%就会塌掉）
img 标签必须配 height: auto
只写 width: 100% 不够。浏览器会把图片当行内元素处理，默认按原始宽高比缩放；一旦容器高度被 JS 或 CSS 强制固定，height 缺失就会导致拉伸变形。
- 正确写法：
img { width: 100%; height: auto; } - 错误写法：
img { width: 100%; height: 100%; }（强制填满，必变形） - 如果容器宽高都固定（比如 300×200px），改用
object-fit: cover;替代height: auto，否则图片会被裁掉顶部/底部
响应式图片别只靠 CSS 缩放
手机端加载一张 2000px 宽的大图再缩到 375px，既慢又浪费带宽。CSS width: 100% 只是视觉缩放，不改变实际下载体积。
- 真响应式要配
srcset：<img src="small.jpg" srcset="small.jpg 480w, medium.jpg 768w, large.jpg 1200w" sizes="(max-width: 480px) 100vw, 50vw"> - 漏掉
sizes，浏览器默认用100vw，小屏也可能加载大图 - JS 轮播库（如 Swiper）初始化时若启用了懒加载，得确保
data-src和srcset同时存在，否则首屏图片不触发预加载
Swiper 的 spaceBetween 会吃掉容器高度
设了 height: 400px，但忘了 spaceBetween: 20 是算在总高度里的。3 张 vertical slide，间隙共 40px，实际需要至少 400 + 40 = 440px 才不截断。
- vertical 模式下：
总需高度 ≥ slideHeight × slidesPerView + spaceBetween × (slidesPerView − 1) - horizontal 模式同理，影响的是宽度计算，容易导致左右滚动条意外出现
- 用
breakpoints切换配置时，height和spaceBetween必须同步改，否则 PC 端正常，手机端就错位
最常被忽略的点：轮播图尺寸问题从来不是单点问题。改了 CSS 容器高度，但 Swiper 初始化参数没重置；加了 srcset 却没配 sizes；写了 width: 100% 却忘了父容器是 display: inline——这些组合起来，才让“调尺寸”变成玄学。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
