Simple technique to make fluid iframes without use of javascript or plugins. Using this technique we have more gains in performance and simplicity.
This is a technique of positioning a element inside of another using “position: absolute;” for the “child” and “position: relative;” for the “wrap”.
(ps: Depending on your case I suggest you set height for images).
HTML:
<div class="fluidMedia"> <iframe src="" frameborder="0"> </iframe></div>
CSS:
.fluidMedia { position: relative; padding-bottom: 56.25%; /* proportion value to aspect ratio 16:9 (9 / 16 = 0.5625 or 56.25%) */
padding-top: 30px; height: 0; overflow: hidden;
}.fluidMedia iframe { position: absolute; top: 0;
left: 0; width: 100%; height: 100%;
}
Example here.
Browser support
-
IE 7+
-
Firefox 3.6+
-
Chrome 6+
-
Safari 5+
You can know more about it on A List Apart great article.
Cheers!
From:http://www.bymichaellancaster.com/blog/fluid-iframe-and-images-without-javascript-plugins/
标签：none
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
