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/
Comments NOTHING