小编Bri*_*ian的帖子
缩放视频以适应Flexbox项目,同时保持纵横比
我正在尝试使用flexbox来布局我的网站.该网站的屏幕顶部有一个视频,下面有可滚动的div.每个柔性项目应使用屏幕高度的50%.
调整屏幕大小时,视频应保持其纵横比.宽度不应超过屏幕宽度,高度不应超过屏幕高度的50%.
现在,当屏幕很窄时,视频会正确缩放以适应宽度:
当屏幕加宽时,视频的高度超出父div的高度,控件显示在可滚动div的上方.
在保持纵横比的同时,如何确保视频永远不会超过柔性物品的高度或宽度？我的一个要求是我必须将视频元素嵌套在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 …4
推荐指数
推荐指数
2
解决办法
解决办法
5633
查看次数
查看次数