Question

哦，这是令人沮丧的。我一直以为我了解HTML和CSS，但这让我发疯了！

我有一个空白的黑色HTML页面，其中只包含带有ID＆＃34;内容＆＃34;的16：9 iframe。

在这个iframe视频中，将向用户显示宽高比为16：9的照片（这将是在Firefox中运行的离线应用程序，类似于原始媒体播放器）。

iframe内部的所有内容（非常精细的多媒体体验）一切都很好除了该播放器的位置/尺寸＆＃34;空白索引页面上的iframe！

它需要垂直居中，宽度为100％，因此触及浏览器窗口的两侧，

当浏览器窗口调整大小时需要响应，但当然需要保持其宽高比

最重要的;它必须始终完全可见！意思是我不能被浏览器窗口裁剪掉！

我认为高4：3或5：4显示没什么大不了的，当垂直居中时，iframe的顶部和底部会有条形（黑色HTML体），它不会被裁剪任何地方。

但是，自从浏览器工具栏和Windows任务栏以及16：9显示以来，有什么大不了的事情，你搞砸了一切，宽高比不是16：9或16： 10当浏览器最大化时，它将再次出现。所以16：9的iframe不会完全可见，它会被裁剪到底部。

（或者用户甚至没有最大化浏览器并在具有更极端宽高比的尴尬比例窗口中使用该应用程序。）

因此iframe需要在其底部被浏览器窗口裁剪之前响应性地增长。永远不要高于100vh。

我尝试过A LOT，最后我得到了一个复杂的div-array和一些CSS，除了底部剪辑之外几乎完成了所有的事情。

我知道＆＃34; vh＆＃34;和＆＃34; vw＆＃34;和＆＃34; max-height＆＃34;什么让你和我尝试了很多。当浏览器窗口太长时，从来没有在底部裁剪iframe。我尝试过与此类似的东西：

Vertically center responsive iframe

但是这个元素的高度不能仅限于＆＃34; 100vh＆＃34;因为它使用此填充方法来保持其宽高比。： - （

我的意思是这一定是可能的，对吧？一个居中的（h＆amp; v）16：9 div / iframe，尽可能多地使用屏幕，但不要在任何地方裁剪。

请帮忙！谢谢!!

Answer 1

取自Bootstrap 3.0，只需应用CSS类，它应该是16乘9还是4乘3：

JS结果：http://jsfiddle.net/crisbeto/jvcg8v0y/

/* Embeds responsive

Credit: Nicolas Gallagher and SUIT CSS. */

.embed-responsive {
  position: relative;
  display: block;
  height: 0;
  padding: 0;
  overflow: hidden;
}
.embed-responsive .embed-responsive-item,
.embed-responsive iframe,
.embed-responsive embed,
.embed-responsive object {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
  border: 0;
}
.embed-responsive.embed-responsive-16by9 {
  padding-bottom: 56.25%;
}
.embed-responsive.embed-responsive-4by3 {
  padding-bottom: 75%;
}

Answer 2

创建一个<div>，然后像这样给出ID“推送器”：

<div id="pusher"></div> 然后添加这些css属性：

#pusher{
   height: 50%;
}

现在为你的iframe设置css属性，给它一个iframe高度减半的上边距，所以如果iframe是300像素高，你的iframe的css将是：

iframe{
    margin-top: -150px;
}

你可以使用：

iframe{
   height: 100%;
   width: 100%;
   margin-top: -50%;
}

当您应用此方法时，您基本上将所有内容推送到屏幕的垂直中心，这样“原点”位于屏幕的中心（垂直），现在就像您需要的那样居中正在应用负边距以“中心点”为中心

需要响应iframe（div）/固定宽高比/水平和垂直居中/ SCALES本身所以它没有得到浏览器裁剪

2 个答案: