保持宽高比的情况下，将视频缩放以适应弹性盒子项。

Question

我正在尝试使用flexbox来布局我的网站。该网站在屏幕顶部有一个视频和可滚动的div。每个flex项目应使用屏幕高度的50％。

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

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

当屏幕变宽时，视频的高度延伸超过了父级div的高度，控件出现在可滚动的div上方。

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

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>

- Brian

---

这里没问题。你能告诉我是哪个屏幕尺寸导致了这个问题吗？ - Chonchol Mahmud

首先，flex-basis和width是相同的。 - Carol McKay

@CarolMcKay 实际上，flexbasis 和 width 并不相同，尽管它们很相似。 - Paulie_D

Answer 1

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

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

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

- Brian

Answer 2

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/

- Carol McKay

---

这个不起作用。视频不能保持其纵横比，底部的div无法滚动。 - Brian

你尝试在表格中而不是div中吗，Brian？ - Carol McKay

Answer 3

随着Flexbox的不断发展，我添加了一些适用于我的CSS - 这允许在一行中放置多个视频，并在浏览器调整大小时保持宽高比。

.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>

- Mick

Answer 4

好的，首先，你在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 ="embed-responsive-item"

应该看起来像这样：

        <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>

希望对你有所帮助 :)

- manAbl