PURE CSS 是不是有任何解决方案来解决这两种纵横比为 16/9 且始终居中的相机布局？

Posted 2023-03-05

【中文标题】PURE CSS 是不是有任何解决方案来解决这两种纵横比为 16/9 且始终居中的相机布局？

【英文标题】：Is there any solution with PURE CSS to solve these two camera layouts with 16/9 aspect ratio and always centered?PURE CSS 是否有任何解决方案来解决这两种纵横比为 16/9 且始终居中的相机布局？

【发布时间】：2021-11-08 17:41:46

【问题描述】：

所以我想知道我可以在多大程度上使用 CSS 网格或 flex 布局来解决这个问题。 这是我想用 html/CSS 构建的两个相机布局：

请注意，我上传了每个布局的两个版本以证明我希望它们始终居中，因此“黑色部分”应始终围绕视频。 希望你明白我的意思。

其他重要的事情是我想在视频上方放置内容和覆盖 div，所以我必须控制相对于视频 0,0 坐标的绝对内容。 （就像图片中的“视频标题”标签一样。）在任何方向调整浏览器大小时，布局都应遵循 16/9 的纵横比。 最后一件事是在我想要集成的产品中，有页眉、面板、页脚，所以这个布局不是页面上唯一的东西。 （所以视频容器的高度不是 100vh。）也许这很重要。

那么只有 HTML/CSS 可以吗？不计算视频的确切大小？

对于基础知识，我为 3x3 布局创建了一个 jsfiddle。我不确定我应该如何创建 6 视频版本。也许 grid 可以做 row 和 colspan？

https://jsfiddle.net/5s9wkoea/ → 已编辑带附加功能： https://jsfiddle.net/jnxvd52y/1/

html, body 
  background: #1f2227;
  width: 100%;
  height: 100%;
  font-family: Arial;
  color: white;


h3 
  margin: 0;
  padding: 0;


.videoContainer 
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 2px;
  background: black;
  width: 100%;
  height: 100%;


.video 
  position: relative;
  height: 100%;
  min-width: 0;
  min-height: 0;
  aspect-ratio: 16/9;
  display: flex;
  max-height: 100%;
  max-width: 100%;


.wrapper 
  display: flex;
  width: 100%;
  max-height: 100%;
  max-width: 100%;
  min-height: 0;
  position: relative;



.video .overlayContent 
  position: absolute;
  top: 10px;
  left: 10px;


.video video 
  max-width: 100%;
  max-height: 100%;

<div class="videoContainer">
  <div class="video">
    <div class="wrapper">
      <div class="overlayContent">
        <h3>Video Title</h3>
      </div>
      <video src="https://www.w3schools.com/html/mov_bbb.mp4"></video>
    </div>
  </div>

  <div class="video">
    <div class="wrapper">
      <div class="overlayContent">
        <h3>Video Title</h3>
      </div>
      <video src="https://www.w3schools.com/html/mov_bbb.mp4"></video>
    </div>
  </div>

  <div class="video">
    <div class="wrapper">
      <div class="overlayContent">
        <h3>Video Title</h3>
      </div>
      <video src="https://www.w3schools.com/html/mov_bbb.mp4"></video>
    </div>
  </div>

  <div class="video">
    <div class="wrapper">
      <div class="overlayContent">
        <h3>Video Title</h3>
      </div>
      <video src="https://www.w3schools.com/html/mov_bbb.mp4"></video>
    </div>
  </div>

  <div class="video">
    <div class="wrapper">
      <div class="overlayContent">
        <h3>Video Title</h3>
      </div>
      <video src="https://www.w3schools.com/html/mov_bbb.mp4"></video>
    </div>
  </div>

  <div class="video">
    <div class="wrapper">
      <div class="overlayContent">
        <h3>Video Title</h3>
      </div>
      <video src="https://www.w3schools.com/html/mov_bbb.mp4"></video>
    </div>
  </div>

  <div class="video">
    <div class="wrapper">
      <div class="overlayContent">
        <h3>Video Title</h3>
      </div>
      <video src="https://www.w3schools.com/html/mov_bbb.mp4"></video>
    </div>
  </div>

  <div class="video">
    <div class="wrapper">
      <div class="overlayContent">
        <h3>Video Title</h3>
      </div>
      <video src="https://www.w3schools.com/html/mov_bbb.mp4"></video>
    </div>
  </div>

  <div class="video">
    <div class="wrapper">
      <div class="overlayContent">
        <h3>Video Title</h3>
      </div>
      <video src="https://www.w3schools.com/html/mov_bbb.mp4"></video>
    </div>
  </div>
</div>

非常感谢您的帮助。

【问题讨论】：

我知道这不是一个好的答案，但您可以使用 table

@MohsenNewtoa 如果您知道这不是一个好的答案，那么为什么要首先提及它？没有视频不是表格数据。这就是您拥有 CSS-Grid 的目的。或者也可以使用网格来完成。

【参考方案1】：

我们需要一个视频容器，并为它应用aspect-ratio: 16/9;。 然后我们将 display: grid; grid-template-columns: repeat(3, 1fr) 添加到容器中，以将视频放置在 3 列的网格布局中。 为确保视频不会弄乱网格，我们将width: 100% aspect-ratio: 16/9; 应用于视频。 要使左上角的视频大小增加一倍，我们使用video:first-of-type 选择器选择第一个视频。然后我们对其应用grid-column: span 2; grid-row: span 2;。 要在我们使用flexbox 的屏幕中居中视频，我们可以沿主轴居中（默认情况下：水平）：justify-content: center;。要沿侧轴居中，我们可以使用：align-items: center;。请注意，它需要一个 min-height: 100vh; 到 body 以确保它跨越整个屏幕。 为确保容器始终适合屏幕，我们使用media queries 并根据屏幕纵横比应用固定高度或固定宽度。

body 
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;


.video-container 
  aspect-ratio: 16/9;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 2px;


@media only screen and (min-aspect-ratio: 16/9) 
  .video-container 
    height: 95vh;
  


@media only screen and (max-aspect-ratio: 16/9) 
  .video-container 
    width: 95vw;
  

  

video 
  width: 100%;
  aspect-ratio: 16/9;


video:first-of-type 
  grid-row: span 2;
  grid-column: span 2;

<div class="video-container">
  <video controls>
    <source src="https://www.tacoshy.de/***/testvideo.mp4" type="video/mp4">
  </video>
  <video controls>
    <source src="https://www.tacoshy.de/***/testvideo.mp4" type="video/mp4">
  </video>
  <video controls>
    <source src="https://www.tacoshy.de/***/testvideo.mp4" type="video/mp4">
  </video>
  <video controls>
    <source src="https://www.tacoshy.de/***/testvideo.mp4" type="video/mp4">
  </video>
  <video controls>
    <source src="https://www.tacoshy.de/***/testvideo.mp4" type="video/mp4">
  </video>
  <video controls>
    <source src="https://www.tacoshy.de/***/testvideo.mp4" type="video/mp4">
  </video>
</div>

【讨论】：

首先感谢您的工作。这几乎是我需要的。注意：您可以扩展解决方案以将内容放在视频上方吗？ （就像我对视频标题标签所做的那样。）另一件事是你写 95vh 的高度。我提到视频容器周围有一个页眉和页脚。我应该用 calc 提取这些吗？

您需要包装视频容器，然后将高度/宽度应用于包含视频容器和文本的包装器。根据内容的大小，JS 解决方案可能更实用。或者，如果您想将图像作为结果，您可以使用position: absolute/relative 来执行此操作。

我用我的额外内容创建了一个新的 jsfiddle。您的解决方案也应该有效吗？请看一下，谢谢。非常。 jsfiddle.net/jnxvd52y

我想我可以在你的代码的帮助下做到这一点，所以我会接受它，谢谢！这是：jsfiddle.net/x7638ozv/1

唯一的问题是视频容器有时会与右侧面板重叠，也许如果有人可以看看它，它会有所帮助。上一条评论中的 Jsfiddle 链接。谢谢。