Bri*_*ton 134 css iframe responsive-design
我正在阅读这篇标题为"你能让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: 100%;
}
Oma*_*mar 94
我向你呈现了令人难以置信的歌唱解决方案=)
.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/
当你移动窗口栏时,你会看到iframe响应调整大小
或者,您也可以使用固有比率技术 - 这只是上述相同解决方案的替代选项(番茄,番茄)
.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%;
}
Con*_*all 68
尝试使用此代码使其响应
iframe, object, embed {
max-width: 100%;
}
Avi*_*Avi 46
我找到了Dave Rupert/Chris Coyier的解决方案.但是,我想让卷轴可用,所以我想出了这个:
// HTML
<div class="myIframe">
<iframe> </iframe>
</div>
// 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%;
}
Pra*_*ari 16
您可以使用本网站上提到的这些技巧http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php.
它非常实用且易于理解.你需要创造的一切
<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%;
}
这是您编辑的js小提琴演示.
Chr*_*ael 10
iframe{
max-width: 100% !important;
}
Leo*_*cio 10
看看这个解决方案......对我有用>> 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>
iFrame 可以完全响应，同时使用称为内在比率技术的一点 CSS 技术保持其纵横比。我写了一篇专门解决这个问题的博客文章：https : //benmarshall.me/responsive-iframes/
这个要点是：
.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，完全响应！
iframe 无法响应。您可以使 iframe 容器响应但不响应它显示的内容，因为它是一个具有自己设置的高度和宽度的网页。
示例小提琴链接有效，因为它显示了一个没有声明大小的嵌入式 YouTube 视频链接。
DA是对的.在你自己的小提琴中,iframe确实很敏感.您可以通过检查iframe框大小来验证firebug中的内容.但iframe中的一些元素没有响应,因此当窗口大小很小时它们会"伸出".例如,div#products-post-wrapper宽度为8800px.