Question

我有四个视频，当用户水平和垂直调整浏览器窗口的大小时（没有垂直滚动），它们应该适当调整大小（保存其长宽比并并排居中放置）

这是我的代码段-

    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

任何想法如何解决？还是可能有其他方式使它起作用，就像我描述的那样？

垂直调整浏览器窗口大小时缩放视频

0 个答案: