Making responsive iframe

问题

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

回答1:

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

回答2:

As an update for others coming in the future, you can do this in native javascript without any need for a framework/library with Responsive Iframes.

来源：https://stackoverflow.com/questions/34376585/making-responsive-iframe

标签

html

css

iframe

responsive-design