求助！手机webkit内核浏览器设置object-fit：fill不生效问题

Horse伟雄 2020-04-17 09:08:59

问题描述：我们用4：3的视频在手机上播放，想将视频平铺，拉成16：9的视频，给video标签设置了object-fit：fill属性，在手机谷歌浏览器可以实现这个平铺拉伸效果了，但是在手机其他webkit内核浏览器：诸如qq浏览器，百度浏览器，手机微信打开页面，都无法实现，请问有谁知道原因以及怎么做吗？

...全文

449 回复打赏收藏转发到动态举报

写回复

回复

切换为时间正序

请发表友善的回复…

发表回复

video{ object-fit:fill; } fill: 默认值。替换内容拉伸填满整个content box, 不保证保持原有的比例。 contain: 保持原有尺寸比例。保证替换内容尺寸一定可以在容器里面放得下。因此，此参数可能会在容器内留下空白。 cover: 保持原有尺寸比例。保证替换内容尺寸一定大于容器尺寸，宽度和高度至少有一个和容器一致。因此，此参数可能会让替换内容（如图片）部分区域不可见。 none: 保持原有尺寸比例。同时保持替换内容原始尺寸大小。

最近做的些web页面,内嵌许多小视频，在ios和安卓手机上播放时，遇到不少问题：在微信浏览器内播放时，视频会自动全屏解决办法：给video标签加一些属性，调用h5原生video，我写了个例子，加了注释，如果有错误，烦指正，谢谢！width="100%"controls /*这个属性规定浏览器为该视频提供播放控件*/style="object-fit:fill" /*加这个style会让 And...

1、多行文本溢出显示省略号 p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } 2.中英文自动换行 word-break:break-all;只对英文起作用，以字母作为换行依据word-wrap:break-word; 只对英文起作用，以单词作为换行依据white-space:pre-wrap; 只对中文起作用，强制换行w

1、文字超出部分显示省略号单行文本的溢出显示省略号（一定要有宽度） p{ width:200rpx; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } 多行文本溢出显示省略号 p{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflo...

1、H5页面在IOS后退不刷新该现象与往返缓存(bfcache)有关系 //ios端浏览器回退功能不刷新页面，android端不存在 let isIos = /^.*((iPhone)|(iPad)|(Safari))+.*$/; if (isIos.test(navigator.userAgent)) { window.onpageshow = function(event) { ...

移动开发其他问题

790

社区成员

13,285

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章