• 技术文章 >web前端 >前端问答

    html5中视频可以拉伸吗

    长期闲置长期闲置2021-12-21 13:45:09原创74

    html5中的视频是可以拉伸的,只需要利用style和“object-fit”属性设置视频元素的宽度和高度即可,语法为“<video style="object-fit:fill;width:宽度值;height:高度值;">”。

    本教程操作环境:windows10系统、HTML5版、Dell G3电脑。

    html5中视频可以拉伸吗

    html5中的视频是可以拉伸的。

    想要实现视频拉伸的话,需要利用到style属性和object-fit属性。

    style属性用于设置元素的样式,object-fit属性用于指定元素的内容应该如何去适应指定容器的高度与宽度。

    当object-fit属性的值为fill时,不保证保持原有的比例,内容拉伸填充整个内容容器。

    然后就可以利用width和height属性设置元素的宽度和高度。

    示例如下:

    <html>
    <body>
    <video src="/i/movie.ogg" controls="controls" style="object-fit:fill;width:400px;height:120px;">
    your browser does not support the video tag
    </video>
    </body>
    </html>

    输出结果:

    +2.gif

    推荐教程:《html视频教程

    以上就是html5中视频可以拉伸吗的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:html
    上一篇:html5如何合并行 下一篇:html5添加样式用哪几种方法
    php中文网线上培训班

    相关文章推荐

    • html5的datalist是什么意思• php htmlentities 乱码怎么办• html5视频不自动播放怎么办• JavaScript怎样隐藏html标签• html5如何合并行

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网