仅加 max-width: 100% 和 height: auto 不足以应对横竖屏切换，因它不控制容器比例、不响应方向变化；需结合 orientation 媒体查询、aspect-ratio 和 object-fit 实现方向感知的自适应填充。
只加 max-width: 100% 和 height: auto 不足以应对横竖屏切换——它能防溢出，但无法解决竖屏下图片过小、上下大片留白，或横屏下被裁切的问题。关键在「容器比例控制」和「方向感知」。
为什么 max-width: 100% 在竖屏下常失效
竖屏设备（如手机）视口高度远大于宽度，而多数图片是横向宽高比（如 16:9）。仅靠等比缩放，图片受限于窄的宽度，结果在竖屏中显得极小、悬浮居中、上下空旷；若父容器又设了固定 height，反而触发意外裁剪。
-
max-width: 100%只管宽度上限，不约束高度行为，也不响应orientation变化 - 父容器若没明确高度参照（如
height: 100vh或aspect-ratio），height: auto就失去锚点 - 浏览器不会自动根据屏幕方向重算图片尺寸，必须靠 CSS 媒体查询或容器结构显式干预
@media (orientation: portrait) 怎么用才不踩坑
这个媒体查询是识别方向最轻量的方式，但它不是万能开关：它只在设备真正旋转、且浏览器上报 orientation 时触发，部分安卓 WebView 或旧版 Safari 可能不支持或延迟响应。
- 务必配合
<meta name="viewport">声明，且放在最顶部：<meta name="viewport" content="width=device-width, initial-scale=1.0"> - 别只改
img样式，优先调整其父容器：竖屏下设aspect-ratio: 9/16，横屏下切为16/9，再让图片填满 - 避免在
portrait规则里写width: 100vw; height: 100vh同时生效——这会导致横屏误匹配（某些折叠屏会报错） - 示例安全写法：
@media (orientation: portrait) { .banner-container { aspect-ratio: 9 / 16; } } @media (orientation: landscape) { .banner-container { aspect-ratio: 16 / 9; } } .banner-container img { width: 100%; height: 100%; object-fit: cover; }
object-fit + aspect-ratio 组合为什么最稳
这是目前兼容性好、语义清晰、无需 JS 的竖屏全图方案。核心逻辑是：先用容器锁定比例，再让图片按需缩放填充，而非让图片自己“猜”怎么撑满。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
-
aspect-ratio在 Chrome/Firefox 现代版及 Safari 15.4+ 稳定支持；老版本可用padding-top技法回退（如9/16 → padding-top: 177.77%） -
object-fit: contain适合要完整显示内容的场景（如证件照），cover适合背景图（注意关键区域可能被裁） -
object-position: center top可手动微调对齐点，避免人脸被cover切掉 - 千万别对
img单独加max-width: 100%—— 它已由父容器尺寸约束，再加会干扰object-fit行为
折叠屏或双屏设备要额外注意什么
像 Galaxy Z Fold、Pixel Fold 这类设备，在展开态（screen-spanning: single-fold-horizontal）下，orientation: portrait 可能仍为真，但实际可视区域已接近桌面尺寸。纯靠 orientation 媒体查询会误判。
- 必要时叠加
@media (min-height: 800px)或@media (min-width: 1200px)做二次过滤 - 更可靠的做法是用 JS 回退：
window.matchMedia('(screen-spanning: single-fold-vertical)')配合window.innerHeight和window.innerWidth差值判断 - 如果图片用于导航栏或 Banner，建议用
vw/vh单位替代固定像素，并禁用user-scalable=no（否则折叠屏双屏缩放易异常）
真正难的不是写几行 CSS，而是判断这张图到底该「完整显示」还是「视觉填充」，以及它的容器是否真的提供了可预测的高度上下文——漏掉 viewport 声明、父容器设死高度、或忽略折叠屏的 screen-spanning 查询，都可能导致同一套代码在不同设备上表现分裂。
