我正在尝试使用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>
flexbasis
和width
并不相同,尽管它们很相似。 - Paulie_D