直接设 width: 100vw; height: 100vh 会导致图片强行拉伸失真，因忽略原始宽高比；正确做法是用 object-fit: cover（需容器明确宽高+img设100%宽高）或 background-image + background-size: cover。

img 标签直接设 width: 100vw; height: 100vh 为什么不行

这会让图片强行拉伸填满整个视口，完全忽略原始宽高比，结果是人物变胖、文字压扁、横幅图严重畸变。浏览器不是在“适配”，而是在“暴力覆盖”。width: 100vw 和 height: 100vh 是绝对尺寸指令，和“自适应”无关。

用 object-fit: cover 实现真正可控的全屏效果

它需要两个前提：容器有明确宽高 + 图片自身尺寸被约束。否则 object-fit 根本不触发。

• 必须给容器（比如 .hero）同时设置 width 和 height，或用 aspect-ratio（现代浏览器支持）
• img 元素需设 width: 100% 和 height: 100%，不能留 height: auto
• object-fit: cover 才会等比缩放并裁剪；想保留全部内容就换 contain，但会有上下/左右留白
• 关键细节：object-position: center top 可微调裁剪起点，避免人脸被切掉

background-image + background-size: cover 更稳定

当你要的是视觉层全屏（比如 banner、登录页背景），不用 img 标签反而更可靠——它不参与文档流、不抢 alt、不触发加载阻塞，且老浏览器兼容性更好。

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

• 务必重置 html, body { margin: 0; padding: 0; height: 100%; }，否则 100vh 会失效
• 用 min-height: 100vh 替代 height: 100vh，防止内容超出时被截断
• background-position: center center 确保焦点区域居中；加 background-attachment: fixed 可做视差效果
• 注意：此法丢失 alt 文本和语义化，SEO 和无障碍需额外处理

为什么 max-width: 100%; height: auto 总是“看起来没反应”

这组规则本身没错，但它只对“宽度收缩”起作用，对“高度撑满”毫无帮助。它的生效依赖三个隐形条件，缺一即失效：

立即学习“前端免费学习笔记（深入）”；

• 父容器必须有可计算宽度——空 div 或仅 display: flex 没设 width，100% 就失去参照
• <img style="max-width:90%" style="max-width:90%" alt="HTML全屏图片怎么自适应高度？满屏显示设置指南" > 这类内联属性会直接覆盖 height: auto，删掉它们
• Flex 容器里子项默认带 min-width: auto，得手动加 min-width: 0 才允许图片压缩
• 全局 CSS（如某些 UI 库）可能写了 img { max-width: none; }，用开发者工具检查 computed 样式就能定位

实际最常被忽略的是：全屏 ≠ 高度自适应。所谓“高度自适应”，本质是让图片在保持比例的前提下，**动态匹配当前视口高度**，而不是让容器去迁就图片。用 background-image 或 object-fit 都绕不开容器尺寸的显式声明——这点不写死，其他都白搭。