CSS如何讓iframe達到自適應高度的效果

如今越來越多的人使用手機瀏覽網頁，因此網站的回應能力越來越重要。在手機上測試網站時，我嘗試了很多次才弄清楚為什麼我的影片沒有達到我的預期，直到發現了一個很棒的CSS技巧，可以讓iframe實現自適應高度。接下來就跟大家分享iframe動態實作自訂高度的方法，有興趣的小夥伴可以參考借鏡。

iframe自適應高度

出於演示目的，本文將使用影片嵌入我們的iframe。首先，訪問視頻網址，點擊視頻下的“分享”，然後點擊“嵌入”，具體代碼如下：

<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" 
frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen></iframe>

接下來，我們需要刪除width =“560”height =“315”，因為這裡是設定iframe的大小。由於我們需要自己設定尺寸，因此我們不需要這樣做。

使用CSS

之後，我們需要將iframe放在另一個html元素的

中，這是非常重要的，因為這個元素將會調整你的iframe大小。然後將CSS類別加入包裝的元素中，將一個類別加入iframe，如下所示。

<div class="resp-container">
    <iframe class="resp-iframe" src="https://www.youtube.com/embed/dQw4w9WgXcQ" gesture="media"  allow="encrypted-media" allowfullscreen></iframe>
</div>

使用以下樣式定義包裝類別：

.resp-container {
    position: relative;
    overflow: hidden;
    padding-top: 56.25%;
}

position: relative和iframe的位置在這裡非常重要。 position: relative以便稍後我們可以將iframe與包裝元素相關聯。這是因為在CSS中，position: absolute是基於最接近的非靜態父元素定位元素。

overflow: hidden 是否隱藏任何可能放在容器外的元素。

padding-top: 56.25%這就是關鍵所在。在CSS中，padding-top屬性可以設定百分比，這使我們的iframe保持正確的比例。透過使用百分比，它將根據元素的寬度計算要使用的填充。在我們的範例中，我們希望保持56.26％的比率，也可以使用其他比率。

如下定義iframe類別：

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

position: absolute;這將為iframe提供相對於包裝器的位置，並將其放置在包裝器的填充上。

top: 0並left: 0用於將iframe定位在容器的中心。

width: 100%且height: 100%使IFRAME採取所有包裝的空間。

完成後，你應該會得到一個回應的iframe。

總結：在本文中，我們已經看到了可以讓iframe實現自適應高度的技巧。正如您所看到的，它實際上非常簡單，希望這篇文章可以為您節省數小時的嘗試時間。

【相關教學推薦】

1、CSS教學

2、