html - HTML 5 视频 CSS：在视频海报图像上强制响应比率 16:9（对于 preload="none" 视频）

Question

假设 HTML 5 视频的海报尺寸应始终为 16:9，但实际视频的高度仍然是自动的。我怎样才能使海报图像坚持这些尺寸（它应该被切割以适应尺寸，例如与对象匹配）？

video {
  width:100%;
  height:auto;
}

video[poster] {
  width:100%;
}

<video poster="https://i.imgur.com/LFgR8jD.png" controls="controls" class="pimcore_video" preload="none">
<source type="video/mp4" src="https://storage.coverr.co/videos/sksZ7cBoTBAJkB4Bul46QAI1c01x7lx18?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6IjExNDMyN0NEOTRCMUFCMTFERTE3IiwiaWF0IjoxNTg3MDMwNzIwfQ.moAIavql_5_ggd9hrKExX6iPeo2UM_CMya6Mozg4hyY">
</video>

正如您在上面的片段中看到的，海报图像的大小与视频本身不同。

标签： htmlcssvideohtml5-videoaspect-ratio