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

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

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

...全文

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

写回复

回复

切换为时间正序

请发表友善的回复…

发表回复

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

平铺布局是现代网页中实现网格化视觉结构的基础技术，其核心在于空间划分与状态反馈的协同控制。它依托CSS Grid进行容器级行列定义，结合Flexbox完成子元素对齐与内容流管理，从而解决响应式列数自适应、文本垂直居中、图片比例锁定、悬停动画性能优化等关键问题。该方案天然支持语义化HTML、无障碍访问与渐进增强，在电商画廊、博客精选、产品展示等多场景中具备高复用性与工程稳定性。本文聚焦‘平铺式布局’与‘css悬停动画’两大高频实践需求，提供从原理到落地的完整技术链路。

HTML和CSS是前端开发的基石，而移动优先设计已成为现代网页交付的核心范式。其原理在于以小屏为起点，通过语义化HTML结构、Flexbox与CSS Grid布局、响应式单位（如rem、clamp）及媒体查询，构建高性能、高可访问性的轻量级页面。技术价值体现在首屏加载更快、触控体验更精准、维护成本更低，并天然支持无障碍阅读与国际化扩展。典型应用场景包括H5营销页、小程序内嵌页、IoT控制面板等需快速上线的轻量触点。本文聚焦‘css flex布局’与‘css超出显示...’等高频实践痛点，提供可直接复用的移动

页脚不仅是页面底部的视觉元素，更是HTML语义结构、CSS布局逻辑与无障碍访问能力的综合体现。其核心原理在于通过语义化标签（如

科易网基于40亿+科创知识图谱数据库，深度探索AI技术在技术转移、成果转化、技术经纪、知识产权、产业创新、科技招商等垂直领域的多样化应用场景，研究科技创新领域的AI+数智化解决方案，推动科技创新与产业创新智能化发展。

移动开发其他问题

791

社区成员

13,277

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

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

+ 用AI写文章