动态缩放iFrame内容以适应div宽度
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;
}
我正在处理的网站有一些内容要在iFrame内部调用。 iframe中的内容具有已知的宽度和不确定的高度。 虽然该页面在我的1080显示器上看起来不错，但该页面旨在在台式机，笔记本电脑和纵向平板电脑之间进行扩展。 由于iFrame的内容是预先确定的，并且以不能更改或调整大小的方式进行布置，因此我试图缩放框架的内容以适应div所包含的div的宽度。当然，我可以设置-webkit-transform: scale帧内容的-webkit-transform: scale比例，但不能跨屏幕分辨率正确调整大小。 我怀疑可能有一些JavaScript可以用来获得“column3”的宽度并缩放iFrame以匹配，但是我对于代码的外观有些遗憾。 我所看到的所有解决方案似乎都是围绕框架本身调整大小，但不考虑缩放框架的内容。
有什么想法吗？
您可以将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>