Question

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的宽度。当然，我可以设置-webkit-transform: scale来缩放帧内容，但是不会在屏幕分辨率上正确调整大小。我怀疑可能有一些javascript我可以用来获得“column3”的宽度并缩放iFrame来匹配，但是我对这段代码看起来有点不知所措。我在这一点上看到的所有解决方案似乎都在调整框架本身的大小，但不考虑缩放框架的内容。

有什么想法吗？

Answer 1

您可以将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>

动态缩放iFrame内容以适合div宽度

1 个答案: