html5的video标签如何拉伸视频,使其变形并且适配div宽高比例? 5
6个回答
2015-09-18 · 知道合伙人互联网行家
关注
展开全部
父集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 广告
2024-11-08 广告
作为上海钇视科技有限公司的工作人员,对于html展示3D模型有所了解。HTML可以通过多种方式展示3D模型,比如使用CSS3的3D变换功能创建简单的3D效果,或者利用Canvas元素和WebGL API绘制复杂的3D图形。另外,还可以借助J...
点击进入详情页
本回答由上海钇视科技提供
展开全部
在标签内增加style="width:(你要求的宽度)px; height:(你要求的高度)px;",注意符号都是英文的
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
使用以下代码即可
<div style="width:400px;height:400px;">
<video src="/i/movie.ogg" width="100%" height="100%" controls="controls">
</video>
</div>
<div style="width:400px;height:400px;">
<video src="/i/movie.ogg" width="100%" height="100%" controls="controls">
</video>
</div>
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
有宽高度设置啊
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
直接用object-fit: fill;
如果是动态创建的
元素.style.objectFit = "fill"
如果是动态创建的
元素.style.objectFit = "fill"
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询