幻灯片图片自适应需解决高宽比失配等四大问题，核心是为容器设固定宽高+aspect-ratio与object-fit:cover组合；旧浏览器用padding-top或JS动态计算高度，并监听orientationchange事件适配横竖屏。
直接用 img 标签加 max-width: 100% 和 height: auto 无法让幻灯片图片在不同显示器上真正“自适应”——它只解决宽度溢出，不处理高宽比失配、全屏裁剪、横竖屏切换和容器尺寸失控这四个关键问题。
为什么幻灯片里 max-width: 100% 总是失效
幻灯片容器（比如 .slider-item）通常用 position: absolute 或 transform 切换，此时图片的父级往往没有明确宽度/高度上下文。浏览器计算 max-width: 100% 时会回溯到 body 或视口，结果在 4K 屏上拉伸模糊，在小屏手机上留白严重。
- 父容器没设
width和height，或用了display: flex却漏了min-width: 0 - 用了
object-fit但没给容器固定尺寸（width + height必须同时存在） - 幻灯片 JS 库（如 Swiper、Flickity）动态修改了
transform，覆盖了 CSS 缩放逻辑 - 横屏切竖屏时，
height: 100vh在 iOS Safari 中会因地址栏收起/展开而跳变
object-fit: cover 配合 aspect-ratio 是最稳的组合
这是目前唯一能兼顾全屏铺满、不拉伸、关键内容不被裁掉的纯 CSS 方案，适用于现代浏览器（Chrome 88+、Firefox 89+、Safari 15.4+）。
- 给幻灯片项容器设固定比例：
.slider-item { width: 100vw; height: 100vh; aspect-ratio: 16 / 9; }（按你图源常见比例调整） - 图片本身设为填满容器：
.slider-item img { width: 100%; height: 100%; object-fit: cover; object-position: center; } - 老版 Safari 不支持
aspect-ratio？用padding-top替代：比如16/9→padding-top: 56.25%，再配合position: absolute定位图片 - 别在
img上写width: 100vw—— 它会和object-fit冲突，导致裁剪位置偏移
需要适配横竖屏切换？必须监听 orientationchange 事件
仅靠 CSS 媒体查询（@media (orientation: portrait)）在 iOS 上不可靠：Safari 不触发重绘，且横竖屏过渡中视口尺寸是渐变的。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
- 用 JS 监听
window.addEventListener('orientationchange', handler)，手动切换容器 class - 为竖屏单独定义比例：
.slider-item.portrait { aspect-ratio: 9 / 16; }，并更新object-position（比如人脸居中改用object-position: 50% 30%） - 避免在
resize里频繁重设font-size或rem——幻灯片对性能敏感，一次 orientationchange 就够 - 测试时务必在真机 Safari 上验证：模拟器不触发
orientationchange，且screen.orientationAPI 返回值可能为空
如果必须兼容 IE 或旧 Android？放弃 aspect-ratio，用 JS 动态算高
不是所有项目都能放弃旧浏览器。这时得用最小侵入方式补救：
- 给每个
img加data-aspect="16:9"属性，JS 读取后动态设置容器style.height = width * (9/16) + 'px' - 用
ResizeObserver监听容器宽度变化（比resize更精准），避免抖动 - 图片加载完成后再执行计算：
img.onload = () => updateHeight()，否则宽高比不准 - 不要用
background-image+background-size: cover做幻灯片主图——它无法被屏幕阅读器识别，且alt文本丢失
真正卡住人的从来不是“怎么写 CSS”，而是幻灯片容器是否真正拥有可控的宽高上下文、object-fit 是否在有明确尺寸的容器里生效、以及横竖屏切换时有没有真实触发重排——这些细节一错，图片就永远“差一点”。
