根本原因是容器未提供有效尺寸上下文：max-width:100%需父容器有可计算宽度，object-fit需容器明确宽高，二者缺一即导致横屏拉伸、裁剪或留白。
横屏图片在移动端或桌面端拉伸、裁剪、留白，根本不是图片本身的问题，而是容器没给对上下文——max-width: 100% 单独用，90% 的失效都出在父级宽度不可计算或 object-fit 没配对。
为什么 img { max-width: 100%; height: auto; } 在横屏下经常不生效
这不是 CSS 写错了，而是浏览器找不到“100% 是相对于谁”的参照物。常见卡点：
- 父容器是
display: flex或display: grid，但没设width或min-width: 0，导致子项默认min-width: auto锁死最小宽度 - 图片写在
display: inline，宽度不可继承 - HTML 中
width或height内联属性，会覆盖 CSS 的height: auto - 横屏时视口宽高比突变（比如 iPhone 横屏宽 812px 高 375px），若父容器用了固定
aspect-ratio: 16/9，但图片源图是 4:3，就会强制拉伸或留黑边
object-fit 怎么选：cover / contain / fill / scale-down
横屏适配的关键不在图片尺寸，而在它怎么“塞进”容器。四个值行为差异极大：
-
object-fit: cover：等比缩放并裁剪，适合横屏全屏 Banner，但可能切掉人脸或关键区域 -
object-fit: contain：等比缩放并完整显示，适合产品图、证件照，但横屏下容易上下/左右留白 -
object-fit: fill：强行拉满，宽高比失真，慎用 -
object-fit: scale-down：只在图片比容器大时才缩放，否则保持原尺寸，适合混合尺寸图库
推荐横屏主图用 cover + 固定容器 aspect-ratio: 16/9；图文混排用 contain + width: 100%; height: 100%。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
横屏专用媒体查询怎么写才不翻车
别只靠 @media (orientation: landscape) —— 它在桌面 Chrome 和部分安卓 WebView 里不可靠。更稳的写法是结合视口宽高判断：
@media (min-aspect-ratio: 12/8) and (min-width: 768px) {
.hero-img {
width: 100vw;
height: 50vh;
object-fit: cover;
}
}
-
min-aspect-ratio: 12/8约等于 1.5，能覆盖多数横屏设备（iPad 4:3=1.33，MacBook 16:10=1.6） - 避免只写
(orientation: landscape)，iOS Safari 在页面加载初期可能误判 - 横屏下慎用
height: 100vh：Safari 地址栏收起/展开会触发视口高度跳变，导致图片闪动或错位
srcset 和 sizes 必须配对，否则横屏高清屏加载小图
横屏设备常有高 DPR（如 iPhone 15 Pro 是 3x），但若 sizes 没告诉浏览器“这张图在横屏下实际占多宽”，浏览器就按默认逻辑选源，结果横屏加载了 320w 的图，糊成马赛克。
-
srcset列的是图片文件的固有宽度（单位w），不是展示宽度 -
sizes必须和 CSS 中该图片容器的**横屏实际渲染宽度**一致，例如：sizes="(orientation: landscape) 100vw, 100% - 如果用了
aspect-ratio容器，sizes应按容器宽度算，不是按图片原始尺寸
真正难的不是写对一行 CSS，而是让 viewport 声明、父容器流式宽度、object-fit 行为、srcset 选源逻辑这四层全部对齐——漏掉任何一层，横屏图片就可能突然变小、变糊、或被切掉半张脸。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
