Scale iFrame css width 100% like an image

Question

I want to scale an iFrame through CSS to width: 100%, and the height should scale proportionally to the width.

With an tag this

Answer 1

I suppose this is a cleaner approach. It works with inline height and width properties (I set random value in the fiddle to prove that) and with CSS max-width property.

HTML:

    

        
    
    
Please scale the "result" window to notice the effect.

CSS:

html,body        {height: 100%;}
.wrapper         {width: 80%; max-width: 600px; height: 100%; margin: 0 auto; background: #CCC}
.h_iframe        {position: relative; padding-top: 56%;}
.h_iframe iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

http://jsfiddle.net/7WRHM/1001/