css解决video标签 poster封面图大小适配问题

最新推荐文章于 2025-05-18 14:54:14 发布

钱大碗爱吃辣

最新推荐文章于 2025-05-18 14:54:14 发布

阅读量8.3k

点赞数 13

CC 4.0 BY-SA版权

分类专栏：问题解决文章标签： css javascript 前端

4 篇文章

订阅专栏

当视频尺寸与封面图尺寸不匹配时，可以利用CSS的object-fit属性来实现封面图的适配。通过设置`object-fit: cover`，可以让封面图保持原有比例并填充整个视频区域，可能会裁剪部分内容以适应尺寸。这为视频封面的布局提供了灵活且不失真的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题描述：

<video  src="xxx"  poster="xxx" class="my-video"   controls="controls" />

有时候，我们会遇到视频尺寸和视频封面图尺寸不相同的情况，
封面图只能展示一部分，没有按照视频的尺寸展示。
例如：

在这里插入图片描述
我们想让封面图撑满整个视频，还想让封面图不被挤压变形。

这里用到object-fit属性去解决。

.my-video{
  width: 100%;
  object-fit: cover;
}

object-fit 属性指定元素的内容应该如何去适应指定容器的高度与宽度。
object-fit 一般用于 img 和 video 标签，一般可以对这些元素进行保留原始比例的剪切、缩放或者直接进行拉伸等。
主要有以下属性值：

值	描述
fill	默认，不保证保持原有的比例，内容拉伸填充整个内容容器。
contain	保持原有尺寸比例。内容被缩放。
cover	保持原有尺寸比例。但部分内容可能被剪切。
none	保留原有元素内容的长度和宽度，也就是说内容不会被重置。
scale-down	保持原有尺寸比例。内容的尺寸与 none 或 contain 中的一个相同，取决于它们两个之间谁得到的对象尺寸会更小一些。