Question

我正在尝试使用flexbox来布局我的网站。该网站的屏幕顶部有一个视频，下面有可滚动的div。每个柔性项目应使用屏幕高度的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>

Answer 1

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

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

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

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/

Answer 3

好的，首先，你拥有100％的flex属性，所以每当窗口的大小改变了flex容器，视频就会缩放到那个窗口容量。

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

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

class =＆＃34; embed-responsive embed-responsive-16by9＆＃34;

并在视频标签中添加此类：

class =＆＃34; embed-responsive-item＆＃34;

应该是这样的：

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

希望对你有用：）

缩放视频以适应Flexbox项目，同时保持宽高比

3 个答案: