天际说

Fluid iframe without use of javascript.

发布时间:2016年4月6日 / 分类:建站经验 / 3,890 次围观 / 抢沙发!

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