因此,我有一个想要的视频,不是全屏播放,而是关闭。我希望它保持其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%宽/高,然后在父级上填充。