HTML/CSS
怎么让网站上视频以16:9比例自适应缩放宽屏显示
PetitQ
我做了一个视频类的网站，是一个自适应的网站，网站上有很多视频，但是视频的尺寸我控制不好，特别是高度，我是在 PC 端设置高度为 480，手机端设置为 280，但总是视频四边出现了黑边，有没有方法让视频能自动按它比例缩放呢？
视频是可以按比例缩放显示的，现在大部分视频的宽度与高度比例是 16:9，我们可以通过 CSS 将视频按照这个比例进行缩放显示。
也想出现在这里？联系我们吧
我们可以将视频放在一个父 DIV 里，然后设置父 DIV 的尺寸为 16:9 的比例，然后再设置 video 标签宽度都是 100%就可以了。具体写法如下：
我们通过百分比设置宽度，根据宽度的比例数值*9/16，计算出高度的百分比数值，设置内边距为高度的数值，最后用绝对定位把视频百分百填充到我们设置的区域里面
<div class="video_wap">
<video src=""></video>
</div>
CSS 样式控制：
.video_wap{padding-bottom: 56%;
width: 100%;
position: relative;
}.video_wap video{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
这样不管你是 PC 还是手机端，网站上的视频都会一直以 16：9 的比例缩放显示了，不会再出现你说的那些问题了。同样这个方法也可以适用图片的缩放显示。
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
