poster 图片自适应方法

要让`poster`图片自适应，可以使用CSS来控制其大小和位置。具体方法如下：

1. 使用`background-image`属性

可以使用CSS的`background-image`属性来设置`poster`，然后使用`background-size`和`background-position`来控制其大小和位置。如下所示：

<video poster="poster.jpg">
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
</video>

<style>
  video {
    background-image: url('poster.jpg');
    background-size: cover; /* 图片按比例缩放，覆盖整个容器 */
    background-position: center center; /* 居中显示 */
  }
</style>

2. 使用`object-fit`属性

可以直接将`poster`图片作为`<img>`元素插入到`<video>`之前，然后使用`object-fit`属性来控制其大小和位置。如下所示：

<video>
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
</video>

<img src="poster.jpg" alt="" class="poster">

<style>
  .poster {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* 图片按比例缩放，覆盖整个容器 */
  }
</style>

这样可以让`poster`图片自适应容器大小，无论是使用`background-image`还是`object-fit`，都可以根据实际需求选择。