HTML代码中video标签poster属性图片尺寸适配与居中策略-html教程-PHP中文网

应禁用原生 poster，改用 css 覆盖层模拟：清空 poster 属性，通过 relative 容器内绝对定位的 img 或 ::before 元素，配合 object-fit: contain/cover 与 object-position: center center 实现不失真居中显示，并用 srcset 提供 2x 图适配 ios 高清屏。

html代码中video标签poster属性图片尺寸适配与居中策略

poster 图片被拉伸变形，怎么保持原始宽高比

直接设置 poster 属性时，浏览器默认用 object-fit: fill 拉满整个 <video></video> 区域，导致图片严重失真。这不是 bug，是规范行为——poster 本质是“占位图”，不自带缩放逻辑。

真正可控的方式是：禁用原生 poster 渲染，改用 CSS 覆盖层模拟。关键点：

给 <video></video> 设置 poster=""（清空值），避免原生渲染干扰
用 ::before 伪元素或同级 <img> 叠加在 video 上，配合 object-fit: contain 或 cover
必须显式设置 position: relative 在 video 容器上，否则伪元素定位失效

<div class="video-container">
  <video controls></video>
  @@##@@
</div>
<p>.video-container {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%; /<em> 16:9 </em>/
}
.poster-overlay {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
object-fit: contain; /<em> 或 cover，按需选 </em>/
width: 100%; height: 100%;
pointer-events: none;
}</p>

不同设备下 poster 图片居中对齐不稳定

常见现象是小屏上图片偏上、大屏上左右留白不对称——根源在于 object-fit: contain 默认对齐方式是 top left，不是居中。

解决只需加一行 CSS：

object-position: center center 必须和 object-fit 配合使用才生效
若用伪元素实现，background-position: center 更可靠（尤其兼容老 iOS）
避免依赖 margin: auto + display: block，video 内部流式布局会破坏它

推荐写法（兼顾兼容性）：

.poster-overlay {
  object-fit: contain;
  object-position: center center;
  /* 或退化方案： */
  /* background: url(poster.jpg) no-repeat center center / contain; */
}

poster 图片加载失败时如何 fallback 显示纯色背景

网络抖动或路径错误会导致 poster 空白，用户看到黑块或闪烁。HTML 原生无 fallback 机制，必须手动处理。

HTML Extract

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

下载

监听 load 和 error 事件，但注意：<img src="poster.jpg" alt="" class="poster-overlay"> 的 error 不冒泡，得单独绑定
不要等 onloadeddata（video 事件），它只管视频本身，不管 poster
最简 fallback：CSS 设置 background-color 作为底色，再叠 poster 图片

示例（无需 JS）：

.poster-overlay {
  background-color: #000;
  background-image: url(poster.jpg);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

这样即使图片 404，也会显示纯黑底——比空白更可控。