轮播图尺寸失效主因是外层容器未显式设置宽高。需为最外层容器设width/height（推荐px或vw/vh），Swiper必须设height，注意spaceBetween和offset对总高度影响，图片需配合object-fit与overflow:hidden，响应式应使用breakpoints而非仅CSS媒体查询。
轮播图容器的 width 和 height 必须显式设置
HTML5 本身不提供轮播组件，实际用的是 JS 库（如 Swiper、Owl Carousel）或纯 CSS 实现。轮播图尺寸不生效，90% 是因为外层 实操建议： 调尺寸时只改 CSS 容器，但 Swiper 初始化参数没同步更新，会导致滑动区域、间距、偏移量和视觉尺寸对不上——比如设了 关键点： 立即学习“前端免费学习笔记（深入）”； 轮播图尺寸调小后，图片模糊、留白、拉伸，大概率是 典型错误和解法： 现代模板常用 Grid/Flex 布局组织页面结构，若把轮播塞进 稳妥做法：
width 和 height（推荐用 px 或 vw/vh，避免 % 套嵌导致不可控）.swiper 必须设 height，否则 slidesPerView: 'auto' 或居中模式会失效max-width: 100% 加在图片上却没限制容器，造成“容器不定、图片自适应”假象Swiper 的
spaceBetween 和 slidesOffsetBefore/After 会影响可视区域计算height: 400px，但 spaceBetween: 30 又没预留空间，顶部/底部被截。
spaceBetween 是 slide 之间的间隙，单位是 px，它会叠加在总高度内；若容器高 400px，3 张 slide 垂直排列，每张高 120px，间隙共 60px，则实际需预留至少 120×3 + 30×2 = 420px
slidesOffsetBefore 或 centeredSlides 时，Swiper 会额外添加 transform 偏移，此时必须确保父容器 overflow: hidden，否则尺寸“看起来调了”，实际内容溢出@media，Swiper 实例要用 breakpoints 重置 height 和 spaceBetween
图片
object-fit 和 width/height 冲突常见
img { width: 100%; height: 100%; } 但没加 object-fit: cover → 图片强制拉伸变形object-fit: cover 却忘了给 img 父元素（通常是 .swiper-slide）设 overflow: hidden → 裁剪失效，边缘溢出srcset 没配对，仅靠 CSS 缩放无法提升清晰度
CSS Grid / Flex 布局嵌套轮播时，
min-height 和 aspect-ratio 更可靠grid-area 或 flex: 1 区域，仅靠 height 往往被父级压缩归零。
轮播图尺寸不是单点调整，是容器、JS 参数、图片策略、布局上下文四者联动的结果。最容易被忽略的是 Swiper 初始化后无法动态响应 CSS aspect-ratio: 16 / 9 替代固定 height，适配响应式且防塌陷（支持 Chrome 88+、Firefox 89+、Safari 15.4+）min-height: 0 阻止 Flex/Grid 默认的最小尺寸保护机制干扰轮播容器padding-top: 56.25% + position: relative + position: absolute 图片，但注意 Swiper 的 observer: true 必须开启，否则高度变化不触发重算height 变化——改完样式务必调用 swiper.update() 或销毁重建实例。
