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

 我来答
程豆豆5A
2015-09-18 · 知道合伙人互联网行家
程豆豆5A
知道合伙人互联网行家
采纳数:153 获赞数:524
从事web前端俞6年,经验丰富,喜欢帮助别人,同时也在提高自己

向TA提问 私信TA
展开全部

父集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
上海钇视科技
2024-11-08 广告
作为上海钇视科技有限公司的工作人员,对于html展示3D模型有所了解。HTML可以通过多种方式展示3D模型,比如使用CSS3的3D变换功能创建简单的3D效果,或者利用Canvas元素和WebGL API绘制复杂的3D图形。另外,还可以借助J... 点击进入详情页
本回答由上海钇视科技提供
袭空岚枫
2015-01-19 · TA获得超过190个赞
知道小有建树答主
回答量:192
采纳率:0%
帮助的人:192万
展开全部
在标签内增加style="width:(你要求的宽度)px; height:(你要求的高度)px;",注意符号都是英文的
本回答被网友采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
windy建建建
2015-08-12 · TA获得超过263个赞
知道答主
回答量:170
采纳率:85%
帮助的人:52.8万
展开全部
使用以下代码即可
<div style="width:400px;height:400px;">
<video src="/i/movie.ogg" width="100%" height="100%" controls="controls">
</video>
</div>
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
weikao9
2015-01-19 · TA获得超过629个赞
知道小有建树答主
回答量:887
采纳率:50%
帮助的人:352万
展开全部
有宽高度设置啊
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
脉柠星k
2021-07-29
知道答主
回答量:1
采纳率:0%
帮助的人:452
展开全部
直接用object-fit: fill;
如果是动态创建的
元素.style.objectFit = "fill"
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 更多回答(4)
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式