css – 使iframe响应

我正在阅读 this stackoverflow post题为“你能使iFrame响应吗？”，其中一个意见/答案导致我 this jfiddle.

但是当我试图实现html和CSS以适应我的需要，我没有相同的结果/成功。我创建了my own JS fiddle，@R_109_9447@告诉你如何它不工作相同的我。我确定它与我使用的iFrame的类型有关(例如，产品图片可能需要响应或什么？)

我的主要担心是，当我的博客读者访问我的博客上他们的iPhone，我不想要的一切都是在x宽度(100％的所有我的内容)，然后iFrame行为不端，是唯一的元素更宽过去所有其他内容 – 如果这是有道理的)

无论如何，有没有人知道为什么它不工作？谢谢。

这里是HTML& CSS的MY JSFIDDLE(如果你不想点击链接)：

<div class="wrapper">
    <div class="h_iframe">
        <!-- a transparent image is preferable -->
        <img class="ratio" src="http://www.brightontheday.com/wp-content/uploads/2013/07/placeholder300.png"/>
       <iframe frameborder='0' height='465px' width='470px' scrolling='no' src='http://currentlyobsessed.me/api/v1/get_widget?wid=30&blog=Brighton+The+Day&widgetid=38585' frameborder="0" allowfullscreen></iframe>
    </div>
</div>

这里是附带的CSS：

.wrapper         {width:100%;height:100%;margin:0 auto;BACkground:#ffffff}
.h_iframe        {position:relative;}
.h_iframe .ratio {display:block;width:100%;height:auto;}
.h_iframe iframe {position:absolute;top:0;left:0;width:100%; height:100%;}

iframe,object,embed {
    max-width: 100%;
}