HTML怎么实现图片自动缩放至全屏_网页背景设置【常用】-html教程-PHP中文网

最稳方案是background-size: cover配合min-height: 100vh，而非height: 100vh；需清除html/body默认边距、设background-position: center、background-repeat: no-repeat，并避免用强拉伸导致失真或兼容性问题。

html怎么实现图片自动缩放至全屏_网页背景设置【常用】

直接用 background-size: cover 配合 height: 100vh 是最稳的方案，不是所有“全屏”都等于“把 <img> 拉满”，误用会导致失真、滚动条或布局塌陷。

为什么不用 `<img>` 标签直接撑满视口

把 <img> 的 width 和 height 强设为 100vw/100vh 看似简单，但实际问题很多：

图片会强制拉伸变形，除非加 object-fit: cover，但 IE 不支持
如果父容器没设高度（比如 body 默认不是 100% 高），100vh 失效
<img> 是流式元素，可能触发意外的 margin/padding/line-height 间隙
语义上它是一张“内容图”，不是“背景”，SEO 和可访问性也弱于明确用途

`background-image` + `cover` 的最小可靠写法

这是目前兼容性最好、行为最可控的方式，适用于首屏大图、登录页等场景：

必须给 html 和 body 清除默认边距：margin: 0; padding: 0;
body 要设 height: 100vh（不是 100%），否则背景区域高度为 0
background-size: cover 是关键——等比缩放并裁切，确保无留白
加上 background-position: center，避免人脸/主体被裁掉
禁用重复：background-repeat: no-repeat

示例：

HTML Extract

使用 MinerU 从 HTML 页面和文件中提取内容，将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...

下载

html, body {
  margin: 0;
  padding: 0;
}
body {
  height: 100vh;
  background-image: url('hero.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}