缩放视频以适应 flexbox 项目，同时保持纵横比答案

【问题标题】：Scale video to fit inside flexbox item while keeping aspect ratio缩放视频以适应 flexbox 项目，同时保持纵横比
【发布时间】：2016-04-22 11:05:22
【问题描述】：

我正在尝试使用 flexbox 来布局我的网站。该网站在屏幕顶部有一个视频，在其下方有一个可滚动的 div。每个弹性项目应使用屏幕高度的 50%。

调整屏幕大小时，视频应保持其宽高比。宽度不超过屏幕宽度，高度不超过屏幕高度的50%。

现在，当屏幕变窄时，视频会正确缩放以适应宽度：

当屏幕变宽时，视频的高度会超出父 div 的高度，并且控件会出现在可滚动 div 的上方。

如何确保视频在保持宽高比的同时永远不会超过弹性项目的高度或宽度？我的一个要求是我必须将视频元素嵌套在弹性项目中（我不能将视频元素用作弹性项目）。此外，理想情况下，视频应垂直和水平居中。

html,
body {
  height: 100%;
}
video {
  width: 100%;
  height: auto;
}
.flex-container {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.flex-item {
  padding: 1em;
  width: 100%;
  flex-basis: 50%;
}
.video-content {
  background-color: #ccffcc;
}
.scrollable-content {
  overflow-y: auto;
  background-color: #ffcccc;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="flex-container">
  <div class="flex-item video-content">
    <video src="http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4" controls></video>
  </div>
  <div class="flex-item scrollable-content">
    Scroll content
    <br>Scroll content
    <br>Scroll content
    <br>Scroll content
    <br>Scroll content
    <br>Scroll content
    <br>Scroll content
    <br>Scroll content
    <br>Scroll content
    <br>Scroll content
    <br>Scroll content
    <br>Scroll content
    <br>Scroll content
    <br>Scroll content
    <br>Scroll content
    <br>Scroll content
    <br>Scroll content
    <br>Scroll content
    <br>Scroll content
    <br>Scroll content
    <br>Scroll content
    <br>Scroll content
    <br>Scroll content
    <br>Scroll content
  </div>
</div>

【问题讨论】：

这里没问题。你能告诉我是哪个屏幕尺寸导致了这个问题吗？
一开始的 flex-basis 和 width - 相同。
@CarolMcKay 实际上，flexbasis 和 width 不相同..尽管它们相似。

标签： html css flexbox

【解决方案1】：

html

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="flex-container">
  <div class="flex-item video-content">
    <video src="http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4" controls></video>
  </div>
  <div class="flex-item scrollable-content">
    <h1>Scroll content</h1>
    <p>Scroll content
    <br>Scroll content
    <br>Scroll content
    <br>Scroll content
    <br>Scroll content
    <br>Scroll content
    <br>Scroll content
    <br>Scroll content
    <br>Scroll content
    <br>Scroll content
    <br>Scroll content
    <br>Scroll content
    <br>Scroll content
    <br>Scroll content
    <br>Scroll content
    <br>Scroll content
    <br>Scroll content
    <br>Scroll content
    <br>Scroll content
    <br>Scroll content
    <br>Scroll content
    <br>Scroll content
      <br>Scroll content</p>
  </div>
</div>

css

html,
body {
  height: 100vh;
}
video {
  flex:0 1 100%;
  object-fit: fill; /* over-ride "object-fit: contain" only for webkit as it doesn't honour the ratio */
}
.flex-container {
  height: 100vh;
  display: flex;
  flex-direction:column;
  justify-content:flex-start;
}
.flex-item {
  padding: 1em;
  box-sizing:border-box;
  height:auto;
}
.video-content {
  background-color: #ccffcc;
  flex:0 1 100%;
  height:50%;
  display:flex;
  justify-content:flex-start;
}
.scrollable-content {
  flex:0 0 100%;
  overflow-y: scroll;
  min-height:50vh;
  background-color: #ffcccc;
}

http://codepen.io/anon/pen/wMrYOK

https://css-tricks.com/almanac/properties/o/object-fit/

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

【讨论】：

这不起作用。视频不保持其纵横比且底部 div 不可滚动
你有没有在表格而不是 div @Brian 中尝试过？

【解决方案2】：

我找到了适合我的解决方案。我将position: relative; 添加到.video-content 使video 绝对定位，高度和宽度为100%：

video {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
}

https://jsfiddle.net/beeps10/0hxze25p/

【讨论】：

【解决方案3】：

好的，首先，您将 flex 属性设置为 100%，因此每当窗口大小更改 flex 容器时，视频就会缩放到该窗口容量。

我相信如果你从 bootstrap4 应用一个辅助类

（这是cdn：https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css）这应该可以解决问题。将此类添加到视频的容器中：

class="embed-responsive embed-responsive-16by9"

在视频标签中添加这个类：

class="嵌入响应项"

应该是这样的：

        <div class="flex-item video-content embed-responsive embed-responsive-16by9">
     <video src="http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4" class ="embed-responsive-item" controls></video>

希望对你有用:)

【讨论】：

【解决方案4】：

随着 Flexbox 的不断发展，添加了一些对我有用的 CCS - 这允许连续播放多个视频并在调整浏览器大小时保持纵横比。

.video-layout {
  width: 40%;
  aspect-ratio: 16/9;
  background: #45A29E;
  border:1px solid black;
  color: black;
}

.video-tile {
    height: 100%;
    width: 100%;
}

.container-layout-row {
  width: 100%;
  display: flex; /* or inline-flex */
  flex-direction: row;
  justify-content: center;
  //background-color: orange;
}

<div class="container-layout-row"> 
  <div class="video-layout">
     <video controls class="video-tile">
       <source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4" type="video/mp4"/>
              Your browser does not support the video tag.
      </video>
  </div>
    <div class="video-layout">
     <video controls class="video-tile">
       <source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4" type="video/mp4"/>
              Your browser does not support the video tag.
      </video>
  </div>
</div>

【讨论】：