React中用TailwindCSS设置video标签宽高后无法铺满的解决方法

视频元素默认会维持自身的宽高比例，即便你通过Tailwind设置了固定宽高，它也只会在设定范围内按比例缩放，不会填满整个容器。要让视频完全填充你设置的宽高，需要添加object-fit相关的Tailwind类：

方案1：保持比例裁剪填充（推荐） #

使用object-cover类，它会维持视频原比例，裁剪超出容器的部分来填满整个区域：

<video className='w-[38.125rem] h-[31.875rem] object-cover' autoPlay loop src="/video/page1Block2.mp4"></video>

方案2：完全拉伸适配容器 #

如果不需要维持视频原比例，直接用object-fill类强制视频拉伸填满容器：

<video className='w-[38.125rem] h-[31.875rem] object-fill' autoPlay loop src="/video/page1Block2.mp4"></video>

内容的提问来源于stack exchange，提问作者Serafim Nikolaev