直接设 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%就失去参照 -
height: auto，删掉它们 - Flex 容器里子项默认带
min-width: auto，得手动加min-width: 0才允许图片压缩 - 全局 CSS（如某些 UI 库）可能写了
img { max-width: none; }，用开发者工具检查 computed 样式就能定位
实际最常被忽略的是：全屏 ≠ 高度自适应。所谓“高度自适应”，本质是让图片在保持比例的前提下，**动态匹配当前视口高度**，而不是让容器去迁就图片。用 background-image 或 object-fit 都绕不开容器尺寸的显式声明——这点不写死，其他都白搭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
