如何在 HTML/CSS 中的图块列表中获取 16:9 比例的所有子项

Question

我正在尝试获取一组平铺视频以显示 4:3 视频的黑色 16:9 背景以及左右两侧的黑条，因此它们都排成一行视频高度没有差异，就好像所有视频都是 16:9 格式一样。

目前的问题是，不同宽高比的人屏幕看起来很乱，我想让它统一。大多数人似乎都有 16:9，所以我想将其作为标准。

我有一个看起来像这样的例子，这是我使用图像的下面例子的 js fiddle，这些通常会换成视频，但我认为同样的原则适用。

https://jsfiddle.net/g0u6ak9p/

我更希望它看起来像这样...

我看过添加 padding-top: 56.25%; 的示例，但我无法使其正常工作。

谁能指点一下？

Answer 1

我想通了。

我需要为每个不同数量的用户添加 CSS，但在这样做时我可以根据 100vw 和 100vh 除以那里的数量 rows/columns 来计算最大高度和宽度是为了获得我需要的 16:9 比率。

https://jsfiddle.net/tg2wknfp/5/

 .video-example{
   width: 100%;
   height; 100%;
   background: #111;
 }
 
.tiles-list-5 > .tile-0 .video-example,
.tiles-list-5 > .tile-1 .video-example,
.tiles-list-5 > .tile-2 .video-example{
  max-height: calc(100vw / 3 * 9 / 16);
  max-width: calc(100vh / 2 * 16 / 9);
}
.tiles-list-5 > .tile-3 .video-example,
.tiles-list-5 > .tile-4 .video-example {
  max-height: calc(100vw / 2 * 9 / 16);
  max-width: calc(100vh / 2 * 16 / 9);
}

如何在 HTML/CSS 中的图块列表中获取 16:9 比例的所有子项

How to get all children in 16:9 ratio in tiles list in HTML/CSS

html

css

styling