使 iframe 响应 [英] Making an iframe responsive

问题描述

我正在阅读你可以让 iFrame 响应吗?，还有一个的评论/答案让我这个JSFiddle.

但是当我尝试实现 HTML 和 CSS 以满足我的需求时，我没有获得相同的结果/成功.我创建了 我自己的 JSFiddle 所以我可以向你展示它对我.我确定这与我使用的 iFrame 类型有关(例如，产品图片可能也需要响应?)

我主要担心的是，当我的博客读者在他们的 iPhone 上访问我的博客时，我不希望所有内容都处于 x 宽度(对于我的所有内容均为 100%)，然后 iFrame 出现异常并且是唯一更宽的元素(因此超出所有其他内容 - 如果这有意义吗?)

有人知道为什么它不起作用吗?

这是 HTML &我的 JSFiddle 的 CSS(如果你不想点击链接):

.wrapper {宽度:100%；高度:100%；边距:0 自动；背景:#ffffff；}.h_iframe {位置:相对；}.h_iframe .ratio {显示:块；宽度:100%；高度:自动；}.h_iframe iframe {位置:绝对；顶部:0；左:0；宽度:100%；高度:100%；}

<div class="h_iframe"><!-- 最好使用透明图像--><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>

解决方案

我向您展示 The Incredible Singing Cat 解决方案 =)

.wrapper {位置:相对；填充底部:56.25%；/* 16:9 */填充顶部:25px；高度:0；}.wrapper iframe {位置:绝对；顶部:0；左:0；宽度:100%；高度:100%；}

jsFiddle:http://jsfiddle.net/omarjuvera/8zkunqxy/2/
当你移动窗口栏时，你会看到 iframe 响应式地调整大小

---

或者，您也可以使用内在比率技术

• 这只是上述相同解决方案的替代选项(番茄、番茄)

---

.iframe-container {溢出:隐藏；填充顶部:56.25%；/* 16:9 */位置:相对；}.iframe 容器 iframe {位置:绝对；顶部:0；左:0；边框:0；宽度:100%；高度:100%；}

I was reading Can You Make an iFrame Responsive?, and one of the comments/answers led me to this JSFiddle.

But when I tried to implement the HTML and CSS to fit my needs, I didn't have the same results/success. I created my own JSFiddle so I could show you how it doesn't work the same for me. I'm sure it has something to do with the type of iFrame I'm using (e.g., the product images might need to be responsive too or something?)

My main concern is that when my blog readers visit my blog on their iPhone, I don't want everything to be at x width (100% for all my content) and then the iFrame misbehaves and is the only element wider (and hence sticks out past all the other content - if that makes sense?)

Does anyone know why it's not working?

Here is the HTML & CSS of my JSFiddle (if you don't want to click on the link):

.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%;
}

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

解决方案

I present to you The Incredible Singing Cat solution =)

.wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
}
.wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

jsFiddle: http://jsfiddle.net/omarjuvera/8zkunqxy/2/
As you move the window bar, you'll see iframe to responsively resize

---

Alternatively, you may also use the intrinsic ratio technique

• This is just an alternate option of the same solution above (tomato, tomato)

---

.iframe-container {
  overflow: hidden;
  padding-top: 56.25%; /* 16:9 */
  position: relative;
} 

.iframe-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  border: 0;
  width: 100%;
  height: 100%;
}

这篇关于使 iframe 响应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！