项目中需要在页面中嵌入第三方的页面,但嵌入后发现有页面太宽只展示出来一半的页面来。
解决方法:
主要使用了css的transform属性,思路将ifram扩大将页面全部加载出来。再通过transform属性缩放平移,将页面完好的展示出来。上代码:
<div className={styles.broadband_renewal}>
<iframe
width="200%"
height="200%"
src={url}/>
</div
css:
.broadband_renewal{
transform: scale(0.5,0.5) translate(-50%,-50%);
width: 100%;
height: 100%;
}
缩放大小需要大家根据实际情况调整了。