javascript - 无法在 React js 中用视频填充 div

Question

目标

目标是从 meet up 复制此主页，其中视频放置在导航栏下方。

问题

与图像不同，视频很难在 div 元素中驯服。纵横比保持不变，但视频在 div 中留下空白。据我所知，object-fit仅受“传统”html 支持。使它在 React js 中工作的尝试object-fit失败了。如何video在 React js 中用标签完全填充 div？

链接到代码沙箱https://codesandbox.io/s/react-video-sandbox-forked-drm8o?file=/src/index.js

谢谢阅读！

标签： javascripthtmlcssreactjs

Answer 1

如果我正确理解了您的目标，那么这可能就是您想要的：
https ://codesandbox.io/s/react-video-sandbox-forked-8lkmj?file=/src/index.js

我基本上只是试图复制聚会的作用。
为此，我们不需要使用object-fit.
我们可以编写一些常规的 CSS 样式来实现这一点。

要删除您拥有的空白，我只是让视频包装元素为父尺寸（宽度和高度）的 100%，然后使用 flex-box 将视频居中。

我试图在你的代码框的分支中添加一些描述性评论。