CODEWITHSUNDEEP
htmlcssiframewebkit
Nightglow
Nightglow

Reputation: 133

Dynamic scaling of iFrame content to fit div width

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?

Here is my code: JSFIDDLE

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

Upvotes: 3

Views: 4820

Answers (1)

Michael Coker
Michael Coker

Reputation: 53709

You can divide the iframe's height by the width to get a percentage of padding to apply to the iframe's parent that will force the parent element's aspect ratio, then absolutely position the iframe with 100% height/width for the iframe to scale responsively. 

#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>

Upvotes: 1

Related Questions