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

enter code hereJSFIDDLE 的iFrame动态缩放内容以适合DIV宽度

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以匹配，但是我对于代码的外观有些遗憾。我所看到的所有解决方案似乎都是围绕框架本身调整大小，但不考虑缩放框架的内容。

有什么想法？

来源

2017-01-26 Nightglow

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

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

来源

2017-01-26 20:11:37

这个调整大小的框架，但不能扩展该帧的内容。理想情况下，框架本身的内容（本例中为xkcd.com）应该“缩小”，以便页面的全部内容适合“column3”div的范围。否则，这是一个不错的，优雅的方式来调整框架本身的宽度和高度，即使它没有做任何有关内容。太好了！ – Nightglow

我正在解决我的问题的另一种方法。如果任何人在将来运行这个，动态缩放iframe的内容以适应div的宽度和高度约束，除了类似于上面的内容之外，还需要一些javascript来获得div的正确高宽比。如果有人想刺穿这个，请随时取消 - 但这被认为是封闭/放弃而没有回答。 – Nightglow

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

回答

相关问题