Fluid iframe without use of javascript.
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
