CSS 使 iframe 响应
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17838607/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Making an iframe responsive
提问by Brighton
I was reading this stackoverflow posttitled "Can you make an iFrame responsive?", and one of the comments/answers led me to this jfiddle.
我正在阅读这篇题为“你能让 iFrame 响应吗？”的stackoverflow 帖子，其中一个评论/答案让我找到了这个 jfiddle。
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 JS fiddleso 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?)
但是当我尝试实现 HTML 和 CSS 以满足我的需求时，我没有得到相同的结果/成功。我创建了我自己的 JS 小提琴，所以我可以向你展示它对我来说是如何不同的。我确定这与我使用的 iFrame 类型有关（例如，产品图像可能也需要响应或其他什么？）
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??)
我主要担心的是，当我的博客读者在他们的 iPhone 上访问我的博客时，我不希望所有内容都处于 x 宽度（我的所有内容均为 100%），然后 iFrame 行为异常并且是唯一更宽的元素（因此会粘住）超越所有其他内容 - 如果这有意义吗？？）
Anyway, does anyone know why it's not working? thank you.
无论如何，有谁知道为什么它不起作用？谢谢你。
here is the HTML & CSS of MY JSFIDDLE (if you don't want to click on the link):
这是我的 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>
and here is the accompanying CSS:
这是随附的 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%;
}
回答by Omar
I present to you The Incredible Singing Catsolution =)
我向您展示令人难以置信的会唱歌的猫解决方案 =)
.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
jsFiddle：http: //jsfiddle.net/omarjuvera/8zkunqxy/2/
当你移动窗口栏时，你会看到 iframe 响应地调整大小
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%;
position: relative;
}
.iframe-container iframe {
position: absolute;
top: 0;
left: 0;
border: 0;
width: 100%;
height: 100%;
}
回答by Connor Cushion Mulhall
Try using this code to make it responsive
尝试使用此代码使其响应
iframe, object, embed {
max-width: 100%;
}
回答by Avi
I found a solution from from Dave Rupert / Chris Coyier. However, I wanted to make the scroll available so I came up with this:
我从 Dave Rupert / Chris Coyier 找到了一个解决方案。但是，我想让滚动条可用，所以我想出了这个：
// HTML
// HTML
<div class="myIframe">
<iframe> </iframe>
</div>
// CSS
// CSS
.myIframe {
position: relative;
padding-bottom: 65.25%;
padding-top: 30px;
height: 0;
overflow: auto;
-webkit-overflow-scrolling:touch; //<<--- THIS IS THE KEY
border: solid black 1px;
}
.myIframe iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
回答by Pragnesh Chaudhari
You can use this tricks mentioned on this site http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php.
你可以使用这个网站http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php上提到的技巧。
Its very useful and easy to understand. All you need to create
它非常有用且易于理解。您只需要创建
<div class="videoWrapper">
<!-- Copy & Pasted from YouTube -->
<iframe width="560" height="349" src="http://www.youtube.com/embed/n_dZNLr2cME?rel=0&hd=1" frameborder="0" allowfullscreen></iframe>
</div>
.videoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Here is your edited js fiddlefor demonstration.
这是您编辑的js fiddle用于演示。
回答by Leo Leoncio
check out this solution... works for me >> https://jsfiddle.net/y49jpdns/
看看这个解决方案......对我有用>> https://jsfiddle.net/y49jpdns/
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<style>
html body {width: 100%;height: 100%;padding: 0px;margin: 0px;overflow: hidden;font-family: arial;font-size: 10px;color: #6e6e6e;background-color: #000;} #preview-frame {width: 100%;background-color: #fff;}</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
var calcHeight = function() {
$('#preview-frame').height($(window).height());
}
$(document).ready(function() {
calcHeight();
});
$(window).resize(function() {
calcHeight();
}).load(function() {
calcHeight();
});
</script>
</head>
<body>
<iframe id="preview-frame" src="http://leowebguy.com/" name="preview-frame" frameborder="0" noresize="noresize">
</iframe>
</body>
</html>
回答by Christian Michael
iframe{
max-width: 100% !important;
}
回答by Philip007
DA is right. In your own fiddle, the iframe is indeed responsive. You can verify that in firebug by checking iframe box-sizing. But some elements inside that iframe is not responsive, so they "stick out" when window size is small. For example, div#products-post-wrapper's width is 8800px.
DA是对的。在您自己的小提琴中，iframe 确实是响应式的。您可以通过检查 iframe box-sizing 在 firebug 中验证这一点。但是该 iframe 中的某些元素没有响应，因此当窗口大小较小时它们会“突出显示”。例如，div#products-post-wrapper的宽度为 8800px。
回答by Sándor Zuboly
Simple, with CSS:
简单，使用 CSS：
iframe{
width: 100%;
max-width: 800px /*this can be anything you wish, to show, as default size*/
}
Please, note: But it won't make the content inside it responsive!
请注意：但它不会使其中的内容具有响应性！
2nd EDIT:: There are two types of responsive iframes, depending on their inner content:
第二次编辑：：有两种类型的响应式 iframe，具体取决于它们的内部内容：
one that is when the inside of the iframe only contains avideoor animageor manyvertically positioned, for which the above two-rows of CSS code is almost completely enough, and the aspect ratio has meaning...
一种是iframe里面只包含一个视频或者一个图片或者很多垂直放置的时候，对于上面两行CSS代码就差不多够了，长宽比就有意义了……
and the other is the:
另一个是：
contact/registration form type of content, where notthe aspect ratio do we have to keep, but to prevent the scrollbar from appearing, and the content under-flowing the container. On mobile you don't see the scrollbar, you just scroll until you see the content (of the iframe). Of course you give it at least some kind of height, to make the content height adapt to the vertical space occurring on a narrower screen - with media queries, like, for example:
接触/登记表类型的内容，其中，不长宽比做我们必须保持，但要防止滚动条出现，并在流动的容器中的内容。在移动设备上，您看不到滚动条，您只需滚动直到看到（iframe 的）内容。当然，您至少给它某种height, 以使内容高度适应发生在较窄屏幕上的垂直空间 - 使用媒体查询，例如：
@media (max-width: 640px){
iframe{
height: 1200px /*whatever you need, to make the scrollbar hide on testing, and the content of the iframe reveal (on mobile/phone or other target devices) */
}
}
@media (max-width: 420px){
iframe{
height: 1600px /*and so on until and as needed */
}
}
回答by Ben Marshall
iFrames CAN be FULLY responsive while keeping their aspect ratio with a little CSS technique called the Intrinsic Ratio Technique. I wrote a blog post addressing this question specifically: https://benmarshall.me/responsive-iframes/
iFrame 可以完全响应，同时使用称为内在比率技术的一点 CSS 技术保持其纵横比。我写了一篇专门解决这个问题的博客文章：https: //benmarshall.me/responsive-iframes/
This gist is:
这个要点是：
.intrinsic-container {
position: relative;
height: 0;
overflow: hidden;
}
/* 16x9 Aspect Ratio */
.intrinsic-container-16x9 {
padding-bottom: 56.25%;
}
/* 4x3 Aspect Ratio */
.intrinsic-container-4x3 {
padding-bottom: 75%;
}
.intrinsic-container iframe {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}
<div class="intrinsic-container intrinsic-container-16x9">
<iframe src="//www.youtube.com/embed/KMYrIi_Mt8A" allowfullscreen></iframe>
</div>
BOOM, fully responsive!
BOOM，完全响应！
回答by Jestin
Remove iframe height and width specified in pixels and use percentage
删除以像素为单位指定的 iframe 高度和宽度并使用百分比
iframe{ max-width: 100%;}
