如何解决垂直调整浏览器窗口大小时缩放视频
我有四个视频,当用户水平和垂直调整浏览器窗口的大小时(没有垂直滚动),它们应该适当调整大小(保存其长宽比并并排居中放置)
这是我的代码段-
margin: 0;
padding: 0;
}
video {
width: 50vw;
height: 56.25vw;
/* 100/56.25 = 1.778 */
background: pink;
max-height: 50vh;
max-width: 177.78vh;
/* 16/9 = 1.778 */
margin: auto;
position: absolute;
}
.one {
top: 0;
right: 0;
}
.two{
bottom: 0;
right: 0;
}
.three {
top: 0;
left: 0;
}
.four {
bottom: 0;
left: 0;
}
<body>
<div class="container">
<video class="one" src="trailer.mp4" ></video>
</div>
<div class="container">
<video class="two" src="trailer.mp4"></video>
</div>
<div class="container">
<video class="three" src="trailer.mp4"></video>
</div>
<div class="container">
<video class="four" src="trailer.mp4"></video>
</div>
</body>
当我调整窗口视频的大小并正确调整大小后,视频却不会“保持在一起”
#1 and #2 are what I have. #3 - what i want it to be when resizing window
任何想法如何解决?还是可能有其他方式使它起作用,就像我描述的那样?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。