Dynamic scaling of iFrame content to fit div width

2018-07-02 06:29:57

enter code here JSFIDDLE

HTML:

<body>
<div id="column1" class="col-xs-2">
</div>
<div id="column2" class="col-xs-4">
</div>
<div id="column3" class="col-xs-6">
    <div id="wrap">
        <iframe id="frame" src="https://xkcd.com/" frameBorder="0"></iframe>
    </div>
</div>

CSS:

#wrap { 
width: 1200px;
height: 390px;
padding: 0;
overflow: hidden;
}
#frame {
width: 900px;
height: 520px;
border: 0;
}
#frame {
    overflow: hidden;
    -webkit-transform: scale(0.70);
    -webkit-transform-origin: 0 0;
}
#column1 {
    background-color: lightsalmon;
    height:20px;
}
#column2 {
    background-color: LightSteelBlue;
    height: 20px;
}
#column3 {
    background-color: PaleGreen;
}

The site I am working on has a bit of content to be called inside an iFrame. The content within the iframe has a known width, and an indeterminate height. While the page looks just fine on my 1080 monitor, the page is designed to scale between desktop, laptop, and portrait tablets. Because the contents of the iFrame are predetermined and are laid out in a way that cannot change or resize, I am trying to scale the contents of the frame to fit the width of the div it is wrapped in. I can, of course, set -webkit-transform: scale to scale the frame contents, but that doesn't resize correctly across screen resolutions. I suspect that there might be some javascript I could use to get the width of "column3" and scale the iFrame to match, but I'm at a bit of a loss as to what that code would look like. All solutions I have seen to this point seem to function around resizing the frame itself, but do not account for scaling the content of that frame.

Any thoughts?

您可以将iframe的高度除以宽度，以获得应用于iframe父级的填充百分比，这将强制父元素的高宽比，然后绝对将iframe的高度/宽度设置为100％，以便对iframe进行响应缩放。

#wrap { padding-top: 57.7%; height: 0; position: relative; }
#frame { position: absolute; width: 100%; height: 100%; top: 0; left: 0; }

#column1 {
    background-color: lightsalmon;
    height:20px;
}
#column2 {
    background-color: LightSteelBlue;
    height: 20px;
}
#column3 {
    background-color: PaleGreen;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css" rel="stylesheet">

<body>
    <div id="column1" class="col-xs-2">

    </div>

    <div id="column2" class="col-xs-4">

    </div>

    <div id="column3" class="col-xs-6">

        <div id="wrap">
            <iframe id="frame" src="https://xkcd.com/" frameBorder="0"></iframe>
        </div>
    </div>

</body>

链接地址: http://www.djcxy.com/p/89960.html

上一篇: 捏放大/缩放只是在科尔多瓦应用程序的iframe

下一篇: 动态缩放iFrame内容以适应div宽度