时间戳

首页 > 解决方案 > 如何在 HTML/CSS 的平铺列表中以 16:9 的比例获取所有孩子

html - 如何在 HTML/CSS 的平铺列表中以 16:9 的比例获取所有孩子

问题描述

我正在尝试获取一组平铺视频，以显示 4:3 视频在哪里有黑色 16:9 背景，左右两侧有黑条，所以它们都在一条线上，视频高度没有差异，好像所有视频均为 16:9 格式。

目前的问题是，对于具有不同纵横比的人，屏幕看起来很乱，我想让它统一。大多数人似乎有 16:9，所以我想把它作为标准。

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

https://jsfiddle.net/g0u6ak9p/

在此处输入图像描述

相反，我希望它看起来像这样......

在此处输入图像描述

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

任何人都可以建议吗？

标签： htmlcssstyling

解决方案

我已经想通了。

我需要为每个不同数量的用户添加 CSS，但这样做我可以根据 100vw 和 100vh 除以有多少行/列来计算最大高度和宽度，以获得我需要的 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);
}

推荐阅读