Question

我不记得我如何找到this code和applied it 没有问题：

/* Responsive iFrame */

.responsive-iframe-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}

.responsive-iframe-container iframe,   
.vresponsive-iframe-container object,  
.vresponsive-iframe-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

它使得嵌入式iframe谷歌日历变得响应有一些神奇的伏都教，因此根据您的视图大小调整iframe侧。真棒！

问题是：它是如何运作的？ position或overflow看不到这个伎俩。也不是所有其他属性。我猜这个vresponsive的诀窍，但我还没有添加任何jscript来解决这个问题，我甚至没有使用那个类。我使用的只是responsive-iframe-container，如链接中所述！

看起来它会更改iframe中的每个元素以调整其大小。从我卑微的观点来看，这很疯狂。必须有一些魔术运动欺骗我！

Answer 1

好吧，无论出于何种原因（通常我在提问时找到答案，并删除问题），我只是决定谷歌搜索响应式iframe 并找到this作为第二个结果，这可能是代码来自的地方。它详细解释了所有内容，基本上，它实际上是一起使它工作，而vresponsive与它无关。

摘自摘要：

嵌入式内容有破坏响应式布局的习惯，因为它包含在具有固定宽度的iframe中。在本文中，我们已经了解了如何添加单个包含的包装器和一些CSS，以确保iframe中包含的所有嵌入内容都随浏览器的窗口大小调整。

从该部分，它解释了一下每个细节：

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}

这做了一些事情：


将position设置为relative，我们可以使用iframe本身的绝对定位，我们很快就会知道。

padding-bottom值是根据视频的宽高比计算出来的。在这种情况下，纵横比为16：9，这意味着高度将是宽度的56.25％。对于宽高比为4：3的视频，我们将padding-bottom设置为75％。

padding-top值设置为30像素，以便为Chrome提供空间 - 这是YouTube视频特有的。

height设置为0，因为padding-bottom为元素提供了所需的高度。我们不设置宽度，因为它会自动调整包含此div的响应元素。

将overflow设置为hidden可确保突出显示此元素之外的任何内容。


我们还需要设置iframe样式。将以下内容添加到样式表中：

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

这会针对iframe类的容器内的.video-container。让我们完成代码：


使用绝对定位，因为包含元素的高度为0。如果iframe正常定位，我们也会给它0的高度。

top和left属性将iframe正确放置在包含元素中。

width和height属性可确保视频占用包含元素（实际使用填充设置）所占空间的100％。


完成此操作后，视频现在将调整屏幕宽度。

这个response-iframe-container代码段如何工作？

1 个答案: