将 Iframe 标签缩放至更大尺寸

Question

Answer 1

iframe 的这个样式代码怎么样：

iframe{
        width:100%;
        height:100vh;
        overflow:hidden;
      }

Answer 2

<!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>Document</title>
    
</head>
<body>
    <div>
        <iframe src="https://www.youtube.com/embed/qL-ry_tz6V0" style="width:100%; height:100vh; overflow:hidden">
            Your browser doesn't support iframes
        </iframe>
    </div>
    
</body>
</html>

你可以使用这个：高度：100vh

Answer 3

首先为所有使用
```
margin: 0; padding: 0;
```
通用选择器设置
```
*{}
```
，以便所有内容都适合屏幕。 注意：这是重置CSS代码，如果不小心处理，可能会影响其他设计
然后为 iframe 设置
```
width:100%; height:100vh; overflow:hidden
```
。这里
vh
表示视图高度
将
```
border: 0 solid transparent;
```
设置为 iframe 以删除边框。注意：如果你想保留边框，请使用CSS的
calc()
函数从宽度和高度中减去边框的厚度

然后你的 iframe 将适合屏幕！

<!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>Document</title>
    
</head>
<body>
    <div>
        <iframe src="https://www.youtube.com/embed/qL-ry_tz6V0">
            Your browser doesn't support iframes
        </iframe>
    </div>
    
    <style>
      *{
        margin: 0;
        padding: 0;
      }
      iframe{
        width:100%;
        height:100vh;
        overflow:hidden;
        border: 0 solid transparent;
      }
    </style>
</body>
</html>

将 Iframe 标签缩放至更大尺寸

问题描述投票：0回答：3

3个回答

最新问题

将 Iframe 标签缩放至更大尺寸

问题描述 投票：0回答：3

3个回答

最新问题

问题描述投票：0回答：3