html如何让一张图片放大成一个屏幕

优先用 background-size: cover + background-position: center 配合固定宽高容器；若必须用 ，则用 Object-fit: cover 并确保父容器有明确宽高、图片设 100% 尺寸且支持该属性。

图片全屏显示用 object-fit 还是 background-size？

直接结论：优先用 background-size: cover + background-position: center，配合固定宽高容器；若必须用 标签，则靠 object-fit: cover，但得注意父容器尺寸控制。

关键不是“放大”，而是“铺满整个视口且不拉伸变形”。很多人一上来就给 设 width: 100vw; height: 100vh，结果图被强行拉宽压扁——因为没管原始宽高比。

• object-fit: cover 只在 上生效，且父容器必须有明确宽高（比如 height: 100vh），否则无效
• background-size: cover 对背景图更稳，不依赖标签语义，兼容性也更好（IE9+）
• 移动端要注意 vh 在 safari 中可能因地址栏收放而跳变，用 100dvh 更可靠（但 IE 和旧 Safari 不支持）

用 实现全屏时的三个硬性条件

缺一不可，否则要么不全屏、要么溢出、要么模糊：

• 父容器必须设 width: 100vw; height: 100dvh（或 100vh，看兼容需求）
• 自身设 width: 100%; height: 100%，不能只设一个方向
• 必须加 object-fit: cover，且确认浏览器支持（chrome 32+/firefox 36+/Safari 15.4+ 支持 dvh，object-fit 更早）

示例代码：

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

   @@##@@ 

为什么 img { width: 100vw; height: 100vh } 常常失败

这不是写法错，而是忽略了两个现实问题：

• 滚动条宽度会吃掉一部分 vw，导致图片右边被截（尤其 windows 默认有滚动条）
• 100vh 在 ios Safari 中等于「当前可视区域高度」，页面滚动后地址栏展开/收起，vh 值会突变，图片突然缩放抖动
• 如果图片分辨率不够，强行拉到全屏会糊——object-fit 不提升像素，只裁剪缩放

解决办法：用 100dvh 替代 100vh（适配现代浏览器），或退回到 background-size 方案规避视口单位缺陷。

用 CSS 背景图实现更稳的全屏方案

适合对兼容性要求高、或图片只是装饰性内容的场景。它绕开了 的语义和尺寸继承问题：

• 容器设 width: 100vw; height: 100dvh，再加 background-image: url(...)
• 必加 background-size: cover; background-position: center; background-repeat: no-repeat
• 如果要响应式，可加 background-attachment: fixed 防止滚动时背景位移（但注意性能）

注意：background-image 里的图片不会被搜索引擎当作主图索引，seo 敏感场景慎用。

真正麻烦的从来不是怎么写那几行 CSS，而是得同时盯住视口单位行为、设备缩放、图片分辨率、以及 Safari 那些不声不响的 vh 变化——这些细节一漏，全屏就变成半屏或者花屏。