Javascript 水平和垂直居中的iframe，纵横比为16:9，使用尽可能多的屏幕空间，而不会在任何地方被裁剪
要求：Javascript 水平和垂直居中的iframe，纵横比为16:9，使用尽可能多的屏幕空间，而不会在任何地方被裁剪,javascript,html,css,iframe,responsive-design,Javascript,Html,Css,Iframe,Responsive Design,要求： <div class="container"> <iframe></iframe> </div> .container { width:90vw; height:50vh; } HTML:iframe必须位于包含div的内部。请参见下面的代码 CSS：容器应该能够使用vw和vh视口单位，具有任何有效的宽度和高度。下面是Se代码 是的，宽度和高度必须在vw和vh中 静态视频预览图像应永远不会被裁剪 静态视频预览图像的上
<div class="container">
<iframe></iframe>
</div>
.container {
width:90vw;
height:50vh;
}
- HTML:iframe必须位于包含div的内部。请参见下面的代码
- CSS：容器应该能够使用
和vw
视口单位，具有任何有效的vh宽度和高度。下面是Se代码 - 是的，
和宽度高度必须在
和vw
中vh - 静态视频预览图像应永远不会被裁剪
- 静态视频预览图像的上方和下方不应有任何黑条（字母框）
- 静态视频预览图像的左侧或右侧不应有任何黑条（柱状）
- 静态视频预览图像应该在包含它的div中使用尽可能多的空间
- 静态视频预览图像应始终保持16:9的纵横比
- 滚动条应该永远不会出现
- 静态视频预览图像应该在包含它的div内垂直和水平居中
- 响应性网页设计
<div class="container">
<iframe></iframe>
</div>
.container {
width:90vw;
height:50vh;
}
如果你想要响应性的使用
.container, iframe {
width:100%;
height:auto;
}
在这个小提琴中似乎工作得很好我已经得到了您想要的结果，但是我不得不添加一个额外的
div.container<div id="wrapper">
<div class="container">
<iframe scrolling="no" src="https://www.youtube.com/embed/YL9RetC0ook" frameborder="0" allowfullscreen>
</iframe>
</div>
</div>
<div class="container">
<iframe src="" frameborder="0"></iframe>
</div>
我不确定这是否适用于Firefox，所以如果您有Firefox，您可以在我的电脑上试用。然而，对于Chrome（至少）来说，这应该是您所列要求中所述的解决方案。为什么不使用calc方法来获得所需的纵横比宽度 HTML
<div id="wrapper">
<div class="container">
<iframe scrolling="no" src="https://www.youtube.com/embed/YL9RetC0ook" frameborder="0" allowfullscreen>
</iframe>
</div>
</div>
<div class="container">
<iframe src="" frameborder="0"></iframe>
</div>
body {
margin: 0;
}
#wrapper {
width: 90vw;
height: 50vh;
}
.container,iframe {
width: 100%;
height: 100%;
}
<style>
$width = 80vw;
.container {
width: $width;
height: calc(($width/16) * 9);
position: relative;
}
iframe {
position: absolute;
width: 100%;
height: 100%;
top: 50%;
left: 50%;
-webkit-transform: translate(+50%, -50%);
transform: translate(+50%, -50%);
}
</style>
$width=80vw；
.集装箱{
宽度：$width；
高度：计算（$width/16）*9）；
位置：相对位置；
}
iframe{
位置：绝对位置；
宽度：100%；
身高：100%；
最高：50%；
左：50%；
-webkit转换：翻译（+50%，-50%）；
转换：翻译（+50%，-50%）；
}
然后，您可以在任何地方更改它的宽度，并使用follow suit在container div和iframe上应用您想要的任何位置我认为表格单元格显示可以解决这个问题。只需在容器上应用它，使iframe成为内容 根据规格，浏览器将在需要正确且完全居中渲染单元格并包含其内容的位置插入虚拟元素，如果需要，可随单元格一起增长 需求：我认为其中一些超出了您的问题范围，它们还取决于iframe中加载的内容，超出了此容器文档的控制范围。我建议的代码很简单，但我相信它满足iframe父级的所有可能要求，并且仍然是交叉浏览器友好的 在加载的文档中，禁止的黑条和强制的纵横比仍然可能是错误的。如果无法控制加载的内容，最后一个选项可能是“srcdoc”和“无缝”属性，但这将排除所有IE版本 有些评论完全不需要。希望下面的编辑能解决这个问题 不管怎样，我玩得很开心！谢谢！：）
完全以容器为中心的Iframe
.集装箱{
显示：表格单元格；
衬垫：；
宽度：100vw；
高度：20vh；
背景：谭；
垂直对齐：中间对齐；
文本对齐：居中；
}
.货柜比率{
显示：内联块；
位置：相对位置；
垫底：56%；
宽度：100%；
身高：0；
溢出：隐藏；
垂直对齐：中间对齐；
}
.集装箱框架{
位置：绝对位置；
前-1%；
左-1%；
边界：0；
宽度：102%；
身高：102%；
溢出：隐藏；
垂直对齐：中间对齐；
}
- 在调整窗口大小时，计算窗口宽度（wW）和窗口高度（wH）
- 根据wW确定容器宽度（cW）（假设cW=wW-10以获得几乎所有可用的宽度-如果需要，可以省略-10）
- 根据上面计算的cW确定容器高度（cH）：cH=cW*9/16
- 现在，如果cH>wH（即容器由于太宽而无法垂直安装到屏幕中），我们应该根据可用的窗口高度修改cW。在这种情况下，cH=wH-10（为了获得几乎所有可用的垂直空间-同样，如果您愿意，可以省略-10），然后cW=wH*16/9
- 您现在应该有一个有效的cW和cH，以使您的容器适合窗口而不离开屏幕，并且您可以将其应用于容器
- 使用位置：绝对，左侧：50%，将容器置于屏幕中央；最高：50%在CSS中。更新cW和cH时，也更新左边距：-（cW/2）；页边顶部：-（cH/2）
这就是概念——你可以根据自己的需要即兴创作。我希望它能有所帮助。相同的解决方案，但没有额外的标记来保持比率 完全不需要相同的评论
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8">
<title>Fully Container Centred Iframe</title>
<meta name="generator" content="PSPad editor, www.pspad.com">
<style>
.container {
display:table-cell; /* (specs: omitted table parts, the browser will insert mandatory elements in the dom tree) */
position:relative;
padding:; /* optional, margins ignored */
width:100vw; /* any value */
height:1vh; /* will expand by the :before element */
overflow:hidden; /* hide eventual black bars */
background:tan; /* bg-colors just for demo testing */
vertical-align:middle;
text-align:center;
}
.container:before {
display:block;
padding-top:56%; /* keeps the 16/9 ratio for the AP */
height:0;
background:red;
content:"\a0";
}
.container iframe {
position:absolute; /* to be ratio consistent */
top:-.5%;
left:-.5%; /* overflow eventual black bars */
border:0;
width:101%; /* grow some to avoid thinner black bars */
height:101%;
overflow:hidden; /* for html5 browsers the html attribute is depreciated */
background:gold;
}
</style>
</head><body>
<div class="container">
<iframe scrolling="no" src=""></iframe>
</div>
</body></html>
完全以容器为中心的Iframe
.集装箱{
显示：表格单元格；/*（规格：省略的表格部分，浏览器将在dom树中插入必需的元素）*/