当前位置：网站首页>How to adapt the page size when iframe is embedded in a web page

How to adapt the page size when iframe is embedded in a web page

2022-06-12 12:51:00 【Five flower hourglass】

Problem description ：

There is a container in the page div, With width and height attribute . stay div Embed a iframe page , Present this effect ：
Insert picture description here
You can see that only part of the embedded page is exposed .

And we hope ： Embedded pages can be completely displayed in containers .

Ideas ： utilize CSS Of `transform`, Zoom the page .

1、 The resolution of the computer screen I developed is 1920 x 1080, On this basis , Set up iframe The width and height of .

2、iframe Parent element of div The width and height of is the width and height of the screen 50%, therefore transform: scale(0.5) This number is 0.5.（ The remaining three attributes have nothing to say , Search if you don't understand W3C Well …）

3、 What should be noted is , Better give div Add one overflow: hidden; Properties of , Because sometimes your div The width and height are not exactly scaled as they are now 50%.

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>iframe When embedding a web page , How to adapt the page size </title>
</head>
<style> html, body {
       width: 100%; height: 100%; } body {
       background-color: rgb(228, 228, 228); overflow: hidden; } * {
       margin: 0px; padding: 0px; } .iframediv {
       width: 50%; height: 50%; margin: 100px auto; border: 10px dashed rgb(58, 58, 58); overflow: hidden; } .iframediv iframe {
       width: 1920px; height: 1080px; top: 0; left: 0; transform-origin: top left; transform: scale(0.5) } </style>

<body>
    <div class="iframediv">
        <iframe src="http://www.hewebgl.com/" frameborder="0"></iframe>
    </div>
</body>
</html>