iframe缩放嵌入页面

2025-03-18 23:01:48 业界科普

iframe嵌入网页时,页面大小怎么自适应

整体思路:利用CSS的 transform ,进行页面缩放。

1. 我开发用的电脑屏幕分辨率是 1920 x 1080,以此为基准,设置iframe的宽高(width: 1920px; height: 1080px;

2. iframe 的父元素 div 的宽高是屏幕宽高的50%(这个就是自己定义或者跟着设计图来的,我写50%只是举例哦),所以 transform: scale(0.5) 这个数值是0.5,即宽高都缩小50%。

3. 需要注意的点是,最好给容器 div 加个 overflow: hidden; 的属性,因为更多的时候你的容器 div 的宽高并不像现在这样正好都缩放50%,跟iframe页面的宽高比例一致。

版权说明: 本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。