我正在阅读
this stackoverflow post题为“你能使iFrame响应吗？”，其中一个意见/答案导致我
this jfiddle.
但是当我试图实现html和CSS以适应我的需要，我没有相同的结果/成功。我创建了my own JS fiddle，所以我可以告诉你如何它不工作相同的我。我确定它与我使用的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%;
}
