相关疑难解决方法(0)

我正在阅读这篇标题为"你能让iFrame响应吗？"的stackoverflow帖子,其中一条评论/答案引领我走向这个jfiddle.

但是当我尝试实现HTML和CSS以满足我的需求时,我没有相同的结果/成功.我创建了自己的JS小提琴,所以我可以告诉你它对我来说不起作用.我确定它与我正在使用的iFrame类型有关(例如,产品图像可能需要响应或其他什么？)

我主要担心的是,当我的博客读者在他们的iPhone上访问我的博客时,我不希望一切都在x宽度(我的所有内容都是100%),然后iFrame行为不端,是唯一更广泛的元素(因此坚持超出所有其他内容 - 如果这是有道理的??)

无论如何,有谁知道为什么它不起作用？谢谢.

这是MY JSFIDDLE的HTML和CSS(如果你不想点击链接):

<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: …