html5的video标签如何拉伸视频,使其变形并且适配div宽高比例?_百度知 ...

发布网友 发布时间：2022-04-23 11:10

我来回答

共6个回答

热心网友 时间：2022-04-19 23:19

父集div使用relative定位，padding-bottom值充当空间，子集video元素absolute定位

具体例子如下，比如视频是16:9的比例，这样比例就不会变了，并且适配div的等高比例

css

.vid-wrapper{
    width:100%;
    position:relative;
    padding-bottom:56.25%;    /*需要用padding来维持16:9比例,也就是9除以16*/
    height: 0;
}
.vid-wrapper video{
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%
}

html

<div class="vid-wrappper">
    <video src=""></video>
</div

热心网友 时间：2022-04-20 00:37

在标签内增加style="width:(你要求的宽度)px; height:(你要求的高度)px;"，注意符号都是英文的

热心网友 时间：2022-04-20 02:12

直接用object-fit: fill;
如果是动态创建的
元素.style.objectFit = "fill"

热心网友 时间：2022-04-20 04:03

使用以下代码即可
<div style="width:400px;height:400px;">
<video src="/i/movie.ogg" width="100%" height="100%" controls="controls">
</video>
</div>

热心网友 时间：2022-04-20 06:11

有宽高度设置啊

热心网友 时间：2022-04-20 08:36

video {
    object-fit:fill;
    width:100%;
    height:100%;
}

IE不支持该属性，现代浏览器支持很好，大家可以尝试一下