将Iframe标签缩放到更大的尺寸
将Iframe标签缩放到更大的尺寸
提问于 2022-09-24 14:32:24
我对我的iframe有意见！如何使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="http://octopi/webcam/?action=stream" style="position:absolute; width:100%; height:100%; overflow:hidden">
Your browser doesn't support iframes
</iframe>
</div>
</body>
</html>回答 2
Stack Overflow用户
发布于 2022-09-24 15:00:27
<!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>
您可以使用这个:高度:100 You
Stack Overflow用户
发布于 2022-09-24 17:15:06
- 首先，使用
margin: 0; padding: 0;通用选择器为所有人设置*{}，这样一切都适合屏幕。注意:这是一个重置的CSS代码，如果不小心处理的话，它可能会影响其他设计 - 然后将
width:100%; height:100vh; overflow:hidden设置为iframe。这里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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73838011
复制相关文章
相似问题
腾讯云开发者
