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

最新推荐文章于 2024-08-18 21:47:24 发布

m0_67402026

最新推荐文章于 2024-08-18 21:47:24 发布

阅读量1.7k

点赞数

分类专栏：前端 html 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_67402026/article/details/123347221

版权

当在前端开发中使用iframe嵌入网页时，如何让页面大小自适应成为一个问题。本文介绍了通过CSS的`width`和`height`属性进行页面缩放的方法，以确保iframe内容完全显示在设定的div容器内。在1920 x 1080分辨率下，将iframe设置为屏幕尺寸的50%，并给div设置相应的百分比宽度和高度。如果div的宽高分别为40%和60%，则需要调整iframe的缩放比例，实现页面的适配显示。

摘要由CSDN通过智能技术生成

问题描述：

页面中有一容器div，有宽高属性。在div中嵌入一个iframe页面，呈现这种效果：
在这里插入图片描述
可以看到嵌入的页面只露出了一部分。

而我们希望：嵌入的页面能够完全展示在容器中。

思路：利用CSS的 `transform`，进行页面缩放。

1、我开发用的电脑屏幕分辨率是 1920 x 1080，以此为基准，设置iframe的宽高。

2、iframe 的父元素 div 的宽高是屏幕宽高的50%，所以 transform: scale(0.5)这个数值是0.5。（其余的三个属性没啥可说的，不明白的搜一下W3C吧…）

3、需要注意的点是，最好给div加个overflow: hidden;的属性，因为有时候你的div宽高并不像现在这样正好都缩放50%。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="wi