制作响应式iframe [英] Making responsive iframe
问题描述
我试图创建一个响应式iframe，它在PC上呈现良好效果，但如果我们考虑移动设备则无法响应。
这是我的 jsfiddle
这里是我的 HTML
< div class =outer>
< div class =noScrolling>
< iframe class =innersrc =https://www.initialstate.com/embed/#/tiles/kkCIxiV4PJmg6y88ldn5HvhNiALMBdHpframeborder =0allowfullscreen>< / iframe>
< / div>
CSS
.outer {
position：relative;
background：url（background-with-backdrop.jpg）no-repeat center;
背景大小：100％100％;
// width：420px;
height：800px;
}
.inner {
position：relative;
left：300px;
top：75px;
width：1050px;
height：582px;
}
.noScrolling {
width：1050px; / *或任何其他尺寸* /
height：800px; / *或任何其他大小* /
overflow-x：hidden;
overflow-y：hidden;
喜欢这个 ？
查看此链接
该页面中的iframe根据宽度调整大小的视图
检查了这一点..我有点让你自己实现你的问题。
编辑
我会尝试解释我做了什么。
，看起来这是一个页面的网站，并且背景似乎完全适合视口，那么使用 vw和vh 是一个好主意。单位的宽度和高度，因为他们根据窗口大小重新缩放尺寸的内容。
现在，如果我们看看CSS，我已经将 body 设置为容器，并给它一个宽度和高度分别为100vw和100vh 。
然后，此容器中的所有内容都可以开始使用body的某个维度的百分比。
body {width：100vw;身高：100vh; margin：0 auto;}。outer {position：relative;背景：url（http://wrb.farm/demo/background-with-backdrop.jpg）no-repeat center;背景大小：100％100％;宽度：100％; height：100％;}。noScrolling {width：100％; height：100％;}。inner {position：relative;宽度：54％;身高：73％;顶部：9％;左：23％; overflow：hidden;}
< body> < div class =outer> < div class =noScrolling> < iframe scrolling =noseamless =seamlessclass =innersrc =https://www.initialstate.com/embed/#/tiles/kkCIxiV4PJmg6y88ldn5HvhNiALMBdHpframeborder =0allowfullscreen>< / iframe> ; < / DIV> < / body>
I tried to create a responsive iframe, it renders good on pc but is not responsive if we consider mobile devices. Here is my jsfiddle
Here is my HTML
<div class="outer">
<div class="noScrolling">
<iframe class="inner" src="https://www.initialstate.com/embed/#/tiles/kkCIxiV4PJmg6y88ldn5HvhNiALMBdHp" frameborder="0" allowfullscreen></iframe>
</div>
CSS
.outer{
position: relative;
background: url(background-with-backdrop.jpg) no-repeat center;
background-size: 100% 100%;
//width:420px;
height:800px;
}
.inner{
position: relative;
left: 300px;
top: 75px;
width:1050px;
height:582px;
}
.noScrolling{
width: 1050px; /*or any other size*/
height: 800px; /*or any other size*/
overflow-x:hidden;
overflow-y:hidden;
}
are you trying to do something like this ? Check out this link the iframe in that page resizes according to the width of the viewport
check this out.. i sort of gave you my own implementation of your problem.
EDIT
I am going to try and explain what i did.
- The key here is to use percentages rather than pixel. Pixels are are absolute and percentages are relative and seem to work better when things are changing with the viewport.
and it seems this is a one page site, and the background seems to be full sized to the viewport, then it is a good idea to use
vw and vhunits for the width and height since they rescale the content of your size according to the size of the window.
Now if we look at the CSS, i have set the body as the container and given it a width and height of 100vw, and 100vh respectively.
Then everything else inside this container can start using a percentage of the dimensions of body.
body {
width: 100vw;
height: 100vh;
margin: 0 auto;
}
.outer {
position: relative;
background: url("http://wrb.farm/demo/background-with-backdrop.jpg") no-repeat center;
background-size: 100% 100%;
width: 100%;
height: 100%;
}
.noScrolling {
width: 100%;
height: 100%;
}
.inner {
position: relative;
width: 54%;
height: 73%;
top: 9%;
left: 23%;
overflow: hidden;
}
<body>
<div class="outer">
<div class="noScrolling">
<iframe scrolling="no" seamless="seamless" class="inner" src="https://www.initialstate.com/embed/#/tiles/kkCIxiV4PJmg6y88ldn5HvhNiALMBdHp" frameborder="0" allowfullscreen></iframe>
</div>
</body>
这篇关于制作响应式iframe的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
