·您当前的位置:首页 > 技术教程 > JavaScript >

[js]如何如何让iframe保持高宽比例问题

时间:2017-09-18 10:25酷播
如何如何让iframe保持高宽比例问题。如果网页中嵌入了一个视频iframe,我通常会给这个iframe设定固定的高度和宽度

如何如何让iframe保持高宽比例问题。如果网页中嵌入了一个视频iframe,我通常会给这个iframe设定固定的高度和宽度,这个高度和宽度的比例通常要适应视频的高宽必,比如16:9。但是,如果我们一旦写死了这个高度和宽度,当有人使用不同屏幕大小的设备访问网页时就会出现问题,比如小屏手机上,原本在电脑上700px/500px的宽度和高度就明显不合适了。我们的想要的结果是,iframe的高宽比能在不同大小的屏幕上,宽度调整,高度也能调整,但宽高比保持不变,因为视频的16:9是不会根据你的屏幕宽度而改变的。

解决这个问题最简单的方法是使用一种新的css长度单位:vm;一个vm长度单位相当于1%的窗口宽度,所以,如果我们想让视频iframe的宽度和高度保持560/315的比例,可以使用下面的代码:

iframe {
    width: 100vw; 
    height: 56.25vw; /* 100/56.25 = 560/315 = 1.778 */
}

上面的代码就是让宽度等于100%, 而高度是56%的宽度。

需要注意的是,各种浏览器对vm这个新长度单位的支持情况并不理想,有兴趣的朋友可以查一下 (caniuse)了解一下浏览器的支持情况。

还有一种更为通用的方法,是基于css2的:

  1. <div class="aspect-ratio"> 
  2.   <iframe src=""   frameborder="0"></iframe> 
  3. </div> 
  4.  
  5. <style> 
  6. /* 这个规则规定了iframe父元素容器的尺寸,我们要去它的宽高比应该是 25:14 */ 
  7. .aspect-ratio { 
  8.   position: relative; 
  9.   width: 100%; 
  10.   height: 0; 
  11.   padding-bottom: 56%; /* 高度应该是宽度的56% */ 
  12.  
  13. /* 设定iframe的宽度和高度,让iframe占满整个父元素容器 */ 
  14. .aspect-ratio iframe { 
  15.   position: absolute; 
  16.   width: 100%; 
  17.   height: 100%; 
  18.   left: 0; 
  19.   top: 0; 
  20. </style> 

 

热门文章推荐

请稍候...

保利威视云平台-轻松实现点播直播视频应用

酷播云数据统计分析跨平台播放器