vue-video-player设置封面图宽高占100%

Vue-video-player是一个轻量级的视频播放组件，如果你想让视频封面图在全屏模式下占据100%，你可以通过CSS样式来实现这个效果。首先，你需要确保你的封面图容器（比如`<img>`或`<video-poster>`元素）设置了响应式布局，并且当屏幕尺寸改变时能够自适应。

在HTML结构上，例如：

<div class="video-container">
  <video-player :url="videoUrl" v-if="isVideoPlaying"></video-player>
  <img :src="coverImage" alt="封面" class="video-poster" v-if="!isVideoPlaying && coverImage" />
</div>

然后，在CSS中设置`.video-poster`的样式：

.video-container {
  position: relative;
}

.video-poster {
  display: block;
  width: 100%; /* 设置宽度为100%，使它始终占据整个容器 */
  height: auto; /* 保持宽高比，高度会根据封面图片的原始比例自动调整 */
  object-fit: cover; /* 这里强制图片填充容器，如果图片小于容器，则等比缩放 */
  max-width: 100%; /* 防止图片超过容器宽度 */
}

这样，无论视频是否正在播放，封面图都会根据其内容自适应并占据其容器的100%宽度。记得替换`coverImage`为你实际的封面图片路径。