HTML/CSS

怎么让网站上视频以16:9比例自适应缩放宽屏显示

也想出现在这里?联系我们
创客云

我做了一个视频类的网站,是一个自适应的网站,网站上有很多视频,但是视频的尺寸我控制不好,特别是高度,我是在 PC 端设置高度为 480,手机端设置为 280,但总是视频四边出现了黑边,有没有方法让视频能自动按它比例缩放呢?

视频是可以按比例缩放显示的,现在大部分视频的宽度与高度比例是 16:9,我们可以通过 CSS 将视频按照这个比例进行缩放显示。

也想出现在这里?联系我们
创客主机

我们可以将视频放在一个父 DIV 里,然后设置父 DIV 的尺寸为 16:9 的比例,然后再设置 video 标签宽度都是 100%就可以了。具体写法如下:

我们通过百分比设置宽度,根据宽度的比例数值*9/16,计算出高度的百分比数值,设置内边距为高度的数值,最后用绝对定位把视频百分百填充到我们设置的区域里面

  1. <div class="video_wap">
  2. <video src=""></video>
  3. </div>

CSS 样式控制:

  1. .video_wap{
  2. padding-bottom: 56%;
  3. width: 100%;
  4. position: relative;
  5. }
  6.  
  7. .video_wap video{
  8. width: 100%;
  9. height: 100%;
  10. position: absolute;
  11. top: 0;
  12. left: 0;
  13. }

这样不管你是 PC 还是手机端,网站上的视频都会一直以 16:9 的比例缩放显示了,不会再出现你说的那些问题了。同样这个方法也可以适用图片的缩放显示。

收藏
(0)

本文由 云模板 作者:PetitQ 发表,转载请注明来源!

也想出现在这里?联系我们
创客主机

发表评论

热销模板

Hub - 响应式可视化编辑企业官网WordPress汉化模板

Envato

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!

精品专区

Contact us all-in-one button with callback - 轻量级侧边按钮客服插件,允许设置自定义的提示语,还支持添加无限数量的联系方式,不仅支持国内的微信二维码、QQ等主流程序,还支持几乎所有国外的热门社交工具、及时聊天程序等,演示参考我们官网右下角客服按钮。

购买插件