第一弹 - 资源福利版.apk
萌猫导航

在自适应布局页面上如何让iframe保持高宽比例

作者: 纯金 来源: 怪哈哈网 日期: 2017-01-20 10:06:40 人气: -

自适应布局网页设计(响应式布局)的好处是一套网页编码能在桌面电脑,平板,手机上根据屏幕的大小自动调整显示方式,极大的提升了用户使用友好性。

但凡事有好处就有弊端,比如今天提到的如何如何让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的:

<div class="aspect-ratio">
  <iframe src=""   frameborder="0"></iframe>
</div>

<style>
/* 这个规则规定了iframe父元素容器的尺寸,我们要去它的宽高比应该是 25:14 */
.aspect-ratio {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56%; /* 高度应该是宽度的56% */
}

/* 设定iframe的宽度和高度,让iframe占满整个父元素容器 */
.aspect-ratio iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}
</style>

这种写法能起作用,是利用了padding属性的一个有趣的百分比值特征:

The percentage is calculated with respect to the width of the generated box’s containing block, even for ‘padding-top’ and ‘padding-bottom’.

https://www.w3.org/TR/CSS2/box.html#padding-properties


转载请注明文章来源(欢迎分享): http://www.guaihaha.com/css/14670.html

怪哈哈动漫图库
关于怪哈哈
怪哈哈是一个集搞笑,美女,动漫,游戏,技术等为核心的综合性网站!
联系我们
商务洽谈、广告合作、友情链接、侵权举报,这些都可以联系我们哦!
关于我们 - 联系我们 - 广告服务 - 免责申明   
本站文字和图片均为严格审查筛选收藏,均收集整理于互联网,其著作权归原作者所有,如果有侵犯您权利的照片,请来信告知,我们将及时撤销相应文字和图片.
Copyright @2014-2020 怪哈哈网 All Rights Reserved.
【谢谢大家一直支持贵站】