0

我不希望海报图像占据该视频的全部尺寸，但保持纵横比并居中。我怎样才能做到这一点？注意：这是一个片段。实际代码是用于嵌入视频的 reactjs 代码 sing react player。我将使用 config.file.attributes 将所需的属性发送到此处看到的 s 。使用style="object-fit=none"作品，但反应玩家可能吗？

代码片段：







<!DOCTYPE html>
<html>
<body>

<h1>The video poster attribute</h1>

<video width="900" height="1240" poster="https://www.w3schools.com/images/w3schools_green.jpg" controls object-fit="none">
   <source src="movie.mp4" type="video/mp4">
   <source src="movie.ogg" type="video/ogg">
   Your browser does not support the video tag.
</video>

</body>
</html>
4

1 回答 1

1

如果这是您的选择，您始终可以<div>使用您想要使用的尺寸围绕您的视频创建一个包装器。让那个 div 有position: relative. 然后，您说视频具有position: absolute和width: 100%（意味着它占用了其父级可用空间的 100%）。高度将自动适应，视频的纵横比将得到尊重。并将您可以使用的视频居中，例如，display: flex; align-items: center;在包装器 div 上。希望它有效！

于 2020-10-21T12:57:58.600 回答