html5 - 如何h5播放器宽度适配手机宽度。高宽有一定比例不变。-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

html5 - 如何h5播放器宽度适配手机宽度。高宽有一定比例不变。

巴扎黑 2017-04-17 12:01:47

[HTML讨论组]

572

宽度设为100%没啥问题。但高度是如何设置的呢。固定比例

巴扎黑

全部回复(2)

怪我咯2017-04-17 12:03:47 2楼

<style>
.myvideo {
  width: 100%;
  height: auto;
}
</style>
<video class="myvideo">
    <source></source>
</video>

赞 +0

添加回复

高洛峰2017-04-17 12:03:47 1楼

如果是视频固定比例 @duckywang1 的回答就可以了
如果是要区域固定比例的话

<style>
section {
    width: 100%;
    height: 0;
    padding-top: 75% /* 4:3 */
    position: relative;
}
section video {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
</style>
<section>
    <video />
</section>

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>

最新下载

更多>

网站特效

网站源码

网站素材

前端模板

关于我们免责申明意见反馈讲师合作广告合作最新更新: php中文网：公益在线php培训，帮助PHP学习者快速成长！; 关注服务号技术交流群

app下载

PHP中文网订阅号: 每天精选资源文章推送

PHP中文网APP: 随时随地碎片化学习

PHP中文网抖音号: 发现有趣的

PHP学习

技术支持

返回顶部