此響應iframe容器代碼段如何工作？

我不記得我是如何找到this code和applied it與沒有問題可言：此響應iframe容器代碼段如何工作？

/* 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中的每個元素來調整它們的大小。從謙遜的觀點來看，這很瘋狂。必須有一些神奇的動作在那裏愚弄我！

來源

2014-10-04 cregox

https://gist.github.com/dcondrey/647fcdda17cd23715872 – davidcondrey 2014-10-05 00:07:26

好，無論出於何種原因（通常我找到答案，同時提出問題，並刪除的問題），我決定谷歌響應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 S的內部容器與.video-container類。我們來看看代碼：

使用絕對定位是因爲包含元素的高度爲0。如果iframe正常放置，我們也會給它一個高度0。

top和left屬性將iframe正確放置在包含元素中。

width和height屬性可確保視頻佔用由包含元素（實際上使用填充設置）使用的空間的100％。

完成此操作後，視頻將隨屏幕寬度調整大小。

來源

2014-10-04 15:02:43 cregox

此響應iframe容器代碼段如何工作？

回答

相關問題