使iframe响应

Question

使iframe响应

当我尝试实现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: 100%;}

Answer 1

尝试使用此代码使其响应iframe, object, embed {     max-width: 100%;}

Answer 2

我找到了Dave Rupert / Chris Coyier的解决方案。但是，我想让卷轴可用，所以我想出了这个：//&nbsp;HTML<div&nbsp;class="myIframe">&nbsp; &nbsp;&nbsp;&nbsp;<iframe>&nbsp;</iframe>&nbsp;</div>//&nbsp;CSS.myIframe&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;position:&nbsp;relative; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;padding-bottom:&nbsp;65.25%; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;padding-top:&nbsp;30px; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height:&nbsp;0; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;overflow:&nbsp;auto;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-overflow-scrolling:touch;&nbsp;//<<---&nbsp;THIS&nbsp;IS&nbsp;THE&nbsp;KEY&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;border:&nbsp;solid&nbsp;black&nbsp;1px;}&nbsp;.myIframe&nbsp;iframe&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;position:&nbsp;absolute; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;top:&nbsp;0; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;left:&nbsp;0; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width:&nbsp;100%; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height:&nbsp;100%;}