iframe 适合屏幕
Posted
技术标签:
【中文标题】iframe 适合屏幕【英文标题】：Iframe fit to screen 【发布时间】：2016-04-22 01:56:57 【问题描述】：我正在尝试通过 iframe 将 my blog 集成到我的网站中。但是，使用这种方法，我必须以像素为单位给出高度和宽度。不过，我希望博客适合屏幕。有没有办法做到这一点？
编辑：下面的答案表明我更改了我的 CSS。那么我该如何处理我的 html 中的“宽度”和“高度”变量呢？这是页面的完整html代码。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<title>Shiloh Janowick's Blog!</title>
<link rel="shortcut icon" href="pics/favicon.ico" type="image/x-icon">
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
</head>
<body>
<iframe src="http://shilohgameblog.wordpress.com" frameborder="0" allowfullscreen></iframe>
</body>
</html>我没有指定宽度和高度，因为我不知道之后要放什么。
【问题讨论】：
【参考方案1】：试试这个。 它对我很有用。
body
margin: 0;
padding: 0;
iframe
display: block;
width: 100vw;
height: 100vh;
max-width: 100%;
margin: 0;
padding: 0;
border: 0 none;
box-sizing: border-box;
【讨论】：
这里为什么需要max-width？【参考方案2】：
如果您想将 iFrame 设为页面宽度（因此它是响应式的），您需要做的就是：
<iframe width="100%" height="315" src="https://www.youtube.com/embed/ENTERVIDEOID" frameborder="0" allowfullscreen></iframe>我已经通过 YouTube 视频完成了此操作，但您可以在不干扰其他任何内容的情况下执行此操作。您也可以将高度更改为 100%。
【讨论】：
【参考方案3】：是的，要获得全屏，请在您的 css 上使用此代码：
html, body, div, object, iframe, fieldset
margin: 0;
padding: 0;
border: 0;
编辑：在你的 CSS 中最后包含它，你的 html 代码必须是这样的：
<iframe src="http://shilohgameblog.wordpress.com"></iframe>
你需要去掉 HTML 代码上的所有其他内容，因为你已经把它放在你的 CSS 上
【讨论】：
谢谢！还有一个问题。我的网站中嵌入了几个 youtube 视频。它们也适合屏幕吗？ 在 youtube 中它有点相同，但你需要一个这样的 url：youtube.com/embed/l8qrqkZApf0 看看它如何只使用单词嵌入和来自 youtube 视频的链接自动适应全屏以上是关于iframe 适合屏幕的主要内容，如果未能解决你的问题，请参考以下文章