iframe 是一項頁面嵌套技術，可以將兩個不同的網頁、兩個不同域的網站快速合併的一種技術手段。 不過在使用這項技術時，通常會遇到大小不匹配的情況，使用佈局視覺不友好。本站也使用到這項技術，不過在解決大小布局問題時，從互聯網搜索到的方法，感覺不太雅化，不過最終還是找到了高度和寬度自適應大小的方法。
在介紹本站方法之前，先來說說可能的解決方法。
在互聯網上，你可以非常輕易的就會找到使用 javascript 來動態調整 iframe 框的高度、寬度自動調整大小。 不過你也可以找到使用純 css 及 html 佈局來解決問題的方法。 在簡單的了解之後，決定使用 css 及 html 的方案。 因為這樣無須考慮把 javascript 的控制邏輯代碼與其它的 javascript 代碼組織的問題。
01 代碼:
<iframe src="" width="100%" height="500" allowtransparency="true"></iframe>02 代碼:
<div style="position: relative; width: 100%; padding-top: calc(100% * 720 / 1280); border: 2px black solid;">
<iframe src="" style="position: absolute; width: 100%; height: 100%; top: 0;"></iframe>
</div>備註：如果被嵌入的頁面，中文字或英文字不斷行或不換行，超出 iframe 框架，導致部份文字被隱藏了，你可以在網頁加上 CSS 代碼 word-break:break-all
CSS 強制換行、不斷行代碼: runoob.com/css-nowrap-word.html
詳細說明:
使用一個 作為容器將 包裹起來，這個容器須設置這樣的樣式， 樣式設定為 。 注意，這個方法是通過一個外部容器來決定 的位置、高度、寬度， 本身不設置大小，並設定其 ，將的上邊框與外部容器的上邊框重疊，這樣就達到控制 大小問題，而且會根據視窗大小自適應哦，不信嘗試調整下當前瀏覽器的寬度，看看這個 例子會發生什麼樣的變化。div iframe position: relative; width: 100%; padding-top: calc(100% * 高度/寬度) iframe position: absolute; width: 100%; height: 100%; top: 0; iframe iframe top: 0 iframe iframe iframe
如果你的是用來引用媒體視頻的，那外部容器的 的值最好跟視頻的高寬比保持一致，css 提供了可以動態計算的 函數。iframe padding-top: calc
使用 javascript 來控制 iframe 高寬度的原理大概是這樣的，使用 javascript 控制程式監聽視窗大小變化事件，然後計算視窗視窗視窗大小，再將具體值設置到 iframe 上。 從而實現自適應，效果上是一樣的。 但使用純 css 的方法來說，是不是更直接呢？
有可能互聯網上大量的基於 javascript 方法的文章是比較舊的，因為 ie 一直做為反動派，老是要跟標準不一樣。 不過大家可以放心，聽說 ie 將在 2022年就被老東家微軟全線放棄了。可以大膽使用 html5/css3
這裡額外收穫了一個知識點，可以用來構建一個高寬比例受控制的佔位框。position: relative; width: 100%; padding-top: calc(100% * 高度/寬度);
