video poster 图片设置 object-fit: cover 如何不裁切？

Question

 <video controls  poster="./images/bentu-android.png" disablePictureInPicture controlslist="nodownload nofullscreen noremoteplayback noplaybackrate">
      <source src="./videos/bentu-android.mp4" type="video/mp4">
    </video>

   .card-item video {
      width: 100%;
      height: 100%;
      border-top-left-radius: 7px;
      border-top-right-radius: 7px;
      object-fit: cover;
    }

video 设置 object-fit: cover ，但是图片会被裁切，有什么办法可以解决吗？

Answer 1

去掉 object-fit:cover 这个样式就不会裁切了。如果你想要铺满 video 标签，可以考虑使用 object-fit:fill 这样就会铺满了，但是预览图会被拉伸。

如果想要保持比例的话，就需要使用你回答的那段JS来设置 video 标签的高度。但是绝大多数情况下，修改完 height 之后在播放可能视频就会出现黑边。以及没有办法对齐布局或者预览图是一张高比宽多很多的图。

所以看你具体的业务需求来做决断。是否布局需要对齐。以及是否需要考虑做最大的 height 限制。
大多数情况下让视频预览图和视频比例保持一致就好了。