html - 视频 100% 宽度和高度

Question

我有一个视频，我希望它填充 100% 的宽度和 100% 的高度。并保持纵横比。

是否有可能至少为两者填充 100%？如果视频的一部分必须超出屏幕以保持宽高比，那也没关系。

HTML:

    <video preload="auto" class="videot" id="videot" height="100%" preload>
    <source src="BESTANDEN/video/tible.mp4" type="video/mp4" >
    <object data="BESTANDEN/video/tible.mp4" height="1080">
        <param name="wmode" value="transparent">
        <param name="autoplay" value="false" >
        <param name="loop" value="false" >
    </object>

CSS:

 .videof, .videot {
    width: 100%    !important;
    height: 100%   !important;
 }

Answer 1

通过查看其他答案，我在 CSS 中使用了 object-fit:

video {
    object-fit: fill;
}

来自 MDN(https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit):

object-fit CSS 属性指定替换元素的内容应如何适应由其使用的高度和宽度建立的框。

值:填充

替换内容的大小会填充元素的内容框:对象的具体对象大小是元素使用的宽度和高度。