banner小屏溢出主因是容器缺max-width、图片未设max-width:100%和height:auto、flex子项未设flex-shrink:0，或background-image容器高度为0；aspect-ratio最干净但旧safari不支持，需padding-top伪元素兜底。
为什么 width: 100% 的 Banner 在小屏上会溢出？
因为很多 Banner 容器默认没设 max-width，也没处理 img 或背景图的缩放逻辑，导致图片强行撑开父容器。更隐蔽的是：父容器用了 display: flex 但没配 flex-shrink: 0，子元素（比如 picture）在窄屏下反而拒绝压缩。
- 检查 Banner 最外层容器是否设置了
overflow: hidden—— 这只是藏问题，不是解问题 - 确保所有图片类元素都加了
max-width: 100%和height: auto，否则width: 100%对img无效 - 如果用
background-image，必须配background-size: cover或contain，且容器高度不能是0（常见于没设min-height或内容为空时）
用 aspect-ratio 控制 Banner 高宽比，但 Safari 15.4 之前不支持
aspect-ratio 是目前最干净的方案，能自动维持比例、避免 js 计算或媒体查询爆炸。但它在旧版 Safari 和部分安卓 webview 中直接失效，表现为高度塌陷或拉伸变形。
- 兜底写法：用
::before伪元素 +padding-top百分比（如padding-top: 56.25%对应 16:9）撑高容器，再绝对定位内容 - 别只靠
@supports (aspect-ratio: 1/1)包裹——有些浏览器识别@supports却不执行aspect-ratio，得加 JS 检测后动态补 class - 若 Banner 内有文字叠加层，注意
aspect-ratio不影响子元素布局流，文字定位仍要靠position: absolute+top/left百分比或transform
响应式 Banner 容器里，Object-fit 和 background-size 怎么选？
两者都能控制图像填充方式，但作用对象和兼容性完全不同：object-fit 用于 <img alt="css响应式广告位适配_处理不同尺寸Banner的容器展示" > 或 <video></video> 标签，background-size 只作用于 CSS 背景图。
- 优先用
object-fit: cover+<img srcset alt="CSS响应式广告位适配_处理不同尺寸Banner的容器展示" >：语义清晰、可访问性好、支持懒加载，且现代浏览器支持率已超 98% - 用背景图时，
background-size: cover会裁剪边缘，contain会留白；若设计要求严格居中且不允许裁剪，得配合background-position: center和容器overflow: hidden - 注意：Safari 对
object-fit在<picture></picture>内部的<source></source>元素支持不稳定，建议把object-fit写在<img alt="CSS响应式广告位适配_处理不同尺寸Banner的容器展示" >上，而不是父级picture
广告位动态插入 Banner 时，CSS 类名冲突或尺寸未重置怎么办？
第三方广告 SDK 常直接注入 dom 并挂载自己的样式，可能覆盖你写的 max-width 或重置 height，导致 Banner 突然变矮或错位。
立即学习“前端免费学习笔记（深入）”；
- 用
!important是下策；更好的做法是提高选择器权重，比如用.ad-banner-container > img替代.ad-banner img - 监听广告容器
DOMNodeInserted（或用MutationObserver）检测新节点，立即补上关键样式，如style="max-width: 100% !important; height: auto !important;" - 如果广告位允许传入容器 ID，优先用 ID 选择器（如
#ad-slot-1），它天然比类名权重高，且不易被批量样式污染
实际项目里最常漏掉的，是 Banner 容器在 SSR 渲染时没有初始高度，而广告脚本又异步加载——结果首屏出现大片空白，等 JS 执行完才“啪”一下弹出来。这个问题没法靠纯 CSS 解决，得配合服务端预留占位高度或前端骨架屏。