Tailwind：带有视频组件的拆分布局？答案

【问题标题】：Tailwind: Split layout with a video component?Tailwind：带有视频组件的拆分布局？
【发布时间】：2021-09-28 04:32:18
【问题描述】：

我正在尝试使用 Tailwind 和 React 构建这种拆分布局：

但是经过无数次的尝试，我才设法实现了这个布局。对图像而不是视频使用完全相同的样式，但我无法缩放/拉伸视频容器。

我假设这可能与 ReactPlayer 组件的宽度和高度属性有关，但每次尝试将它们设置为不同的百分比以改善布局都失败了。

<div className="bg-green w-full md:w-1/2  order-first lg:order-last md:order-last">

<ReactPlayer
url= {TennisVideo}
className="object-contain h-screen md:h-screen lg:h-screen xl:h-screen w-full "
width='100%'
height='100%'
playing={true}
muted={true}
loop={true}
config={{ youtube: { playerVars: { disablekb: 1 } } }}>
  
  </ReactPlayer>

  
  </div>

谁能指出我正确的方向？ https://codesandbox.io/s/sharp-hugle-vpuvr?file=/src/App.js

【问题讨论】：

标签： css reactjs tailwind-css

【解决方案1】：

我想object-contain 是罪魁祸首，应该是object-cover。更多信息请参阅文档here

【讨论】：