封面图片应使用 background-image 配合 background-size: cover，因其可等比缩放并铺满容器（可能裁剪边缘），而 img 标签是流式内容元素，易拉伸错位、上下留白；装饰性封面属视觉层，控制权应在 CSS 手中。
封面图片用 <img alt="HTML个人主页怎么实现封面图片自适应展示" > 还是 background-image？
直接用 <img alt="HTML个人主页怎么实现封面图片自适应展示" > 标签放封面，容易被拉伸、裁剪错位，尤其在手机上常出现上下留白或压扁；而用 CSS 的 background-image 配合 background-size: cover 才能真正实现「铺满容器且保持比例」。这不是偏好问题，是行为差异：前者是流式内容元素，后者是装饰性背景，控制权在 CSS 手里。
推荐方案是用一个空的 <div> 作为封面容器，通过 background 设置图片：
<pre class='brush:php;toolbar:false;'><div class="hero"></div>
<style>
.hero {
height: 100vh;
background-image: url("cover.jpg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
</style></pre>
<h3>
<code>background-size: cover 和 contain 到底差在哪？
这是最常选错的参数。用 cover 时，图片会等比缩放并填满整个容器，**可能裁剪边缘**；用 contain 时，图片完整可见，但**必然留白**——做封面，99% 场景要的是前者。
- 移动端横屏下，
cover可能切掉人物头部，这时加background-position: top或center 20%微调视觉重心 - 如果封面含重要文字（比如标题），别把文字压在图中央，预留安全边距，或用伪元素叠加半透明遮罩提升可读性
- 不要依赖
background-attachment: fixed做视差，它在 iOS Safari 上有渲染 bug，且影响滚动性能
响应式断点要不要写？picture 或 srcset 有用吗？
单张高清图（如 2560×1440）配 cover 在多数设备上够用，但对网络弱、屏幕小的用户不友好——你没必要让手机下载 3MB 的图。
立即学习“前端免费学习笔记（深入）”；
更务实的做法是用 <picture></picture> 按视口宽度切换资源：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
<picture class="hero"> <source media="(max-width: 768px)" srcset="cover-mobile.jpg"> <source media="(max-width: 1200px)" srcset="cover-tablet.jpg"> <img src="cover-desktop.jpg" alt="封面"> </picture>
注意：<picture></picture> 本身不支持 background-size 行为，所以得配合 JS 或额外 CSS 控制尺寸；若嫌麻烦，退一步用 <img alt="HTML个人主页怎么实现封面图片自适应展示" > + srcset 更轻量：
<img src="cover-small.jpg"
srcset="cover-small.jpg 480w,
cover-medium.jpg 1024w,
cover-large.jpg 2560w"
sizes="(max-width: 480px) 100vw, (max-width: 1024px) 100vw, 100vw"
alt="封面">
为什么加了 height: 100vh 在 iOS 上还是显示不全？
iOS Safari 的地址栏收放会动态改变 vh 单位的实际高度，导致封面忽高忽矮，甚至底部被截。这不是 bug，是设计行为。
解决方法不是放弃 vh，而是用 JS 动态修正，或改用更稳定的替代值：
- 用
min-height: 100vh而非height: 100vh，允许内容撑开 - 在 CSS 中加
@supports (-webkit-touch-callout: none) { .hero { height: -webkit-fill-available; } }，利用 Safari 的私有值 - 终极稳妥法：监听
resize，用 JS 设置style.height = window.innerHeight + 'px'，但记得节流
实际项目中，封面区域往往还要叠导航栏、标题文案，这些元素的定位和 z-index 容易和背景图打架，建议把所有交互内容包进一个相对定位的父容器里，再统一控制层级——这点比图片怎么适配还容易出问题。
