简要咨询咨询QQ网站导航网站搜索手机站点联系我们设为首页加入收藏 

web响应式布局中iframe自适应的方法

来源:易贤网   阅读:1520 次  日期:2017-02-13 15:50:33

温馨提示:易贤网小编为您整理了“web响应式布局中iframe自适应的方法”,方便广大网友查阅!

名单

解决方法

iframe元素本身并无法伸缩,除非通过js显示的设置其宽度。但是我们可通过一个iframe-container元素来包裹iframe,同时让iframe-container元素的宽度充满包含块的宽度,并且根据iframe的长宽比,设置iframe-container元素的padding-bottom百分比。

其实,这种方式的精髓就在于设置iframe-container元素的padding-bottom属性,设置该属性的目的在于变相的设置元素的高度。因为给padding-bottom设置百分比,是相对于父元素的width而言的,如果对height属性设置百分比,则相对于父元素的height,而父元素的height值我们通常使用默认的auto,因此会出现子元素height也为0.因此,我们只能给padding-bottom设置属性。这样,只需让iframe元素充满iframe-container即可。

名单

名单

名单

更多信息请查看网页制作
点此处就本文及相关问题在本站进行非正式的简要咨询(便捷快速)】     【点此处查询各地各类考试咨询QQ号码及交流群
上一篇:div宽度设置width:100%后再设置padding或margin超出父元素的解决办法
下一篇:Html中使用自定义图片来实现checkbox显示的方法
易贤网手机网站地址:web响应式布局中iframe自适应的方法
由于各方面情况的不断调整与变化,易贤网提供的所有考试信息和咨询回复仅供参考,敬请考生以权威部门公布的正式信息和咨询为准!