我正在处理的站点有一些内容需要在 iFrame 中调用。 iframe 中的内容具有已知的宽度和不确定的高度。虽然该页面在我的 1080 显示器上看起来不错，但该页面的设计可在台式机、笔记本电脑和纵向平板电脑之间缩放。因为 iFrame 的内容是预先确定的，并且以无法更改或调整大小的方式进行布局，所以我试图缩放框架的内容以适应它所在的 div 的宽度。
当然，我可以设置 -webkit-transform: scale 来缩放框架内容，但这并不能跨屏幕分辨率正确调整大小。我怀疑可能有一些 javascript 可以用来获取“column3”的宽度并缩放 iFrame 以匹配，但我对代码的外观有点不知所措。到目前为止，我看到的所有解决方案似乎都围绕调整框架本身的大小起作用，但没有考虑缩放该框架的内容。
有什么想法吗？
这是我的代码: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>最佳答案
您可以将 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>关于html - 动态缩放 iFrame 内容以适应 div 宽度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41882006/