因此,我有一个想要的视频,不是全屏播放,而是关闭。我希望它保持其16:9的宽高比,但我希望在视频和屏幕边缘之间始终保持填充或空白。所以我现在的https://jsfiddle.net/99yen3v3/是:

width: 80vw;
height: 45vw;


对于div当我水平缩小Web浏览器时,它工作正常,视频div保持其16:9的宽高比。唯一的问题是,每当我垂直缩小Web浏览器时,视频就会慢慢从屏幕上消失。如果我有意义,我希望在垂直缩小Web浏览器时使用相同的填充。

如果您有任何疑问或感到困惑,请提出。我将不胜感激,谢谢。

EDIT1:我已经检查了this post,唯一的区别是在该示例中它们使用1:1的比率,而我的难度更大,为16:9。

EDIT2:不,我的问题不是this one的重复项。我明确指出,我希望div也包含在浏览器窗口的高度中,而不仅仅是宽度。

最佳答案

您想要的是CSS object-fit属性,其中contain为值。

https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

由于您使用的是<video>,因此实际上是默认设置。只需将视频大小设置为100%宽/高,然后在父级上填充。

07-24 09:44
查看更多