我有四个视频,当用户水平和垂直调整浏览器窗口的大小时(没有垂直滚动),它们应该适当调整大小(保存其长宽比并并排居中放置)
这是我的代码段-
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
任何想法如何解决?还是可能有其他方式使它起作用,就像我描述的那样?