如今越來越多的人使用手機(jī)瀏覽網(wǎng)頁，因此網(wǎng)站的回應(yīng)能力越來越重要。在手機(jī)上測(cè)試網(wǎng)站時(shí)，我嘗試了很多次才弄清楚為什麼我的影片沒有達(dá)到我的預(yù)期，直到發(fā)現(xiàn)了一個(gè)很棒的CSS技巧，可以讓iframe實(shí)現(xiàn)自適應(yīng)高度。接下來就跟大家分享iframe動(dòng)態(tài)實(shí)作自訂高度的方法，有興趣的小夥伴可以參考借鏡。
iframe自適應(yīng)高度
出於演示目的，本文將使用影片嵌入我們的iframe。首先，訪問視頻網(wǎng)址，點(diǎn)擊視頻下的“分享”，然後點(diǎn)擊“嵌入”，具體代碼如下：
<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen></iframe>
接下來，我們需要?jiǎng)h除width =“560”height =“315”，因?yàn)檫@裡是設(shè)定iframe的大小。由於我們需要自己設(shè)定尺寸，因此我們不需要這樣做。
使用CSS
之後，我們需要將iframe放在另一個(gè)html元素的
<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與包裝元素相關(guān)聯(lián)。這是因?yàn)樵贑SS中，position: absolute是基於最接近的非靜態(tài)父元素定位元素。
overflow: hidden 是否隱藏任何可能放在容器外的元素。
padding-top: 56.25%這就是關(guān)鍵所在。在CSS中，padding-top屬性可以設(shè)定百分比，這使我們的iframe保持正確的比例。透過使用百分比，它將根據(jù)元素的寬度計(jì)算要使用的填充。在我們的範(fàn)例中，我們希望保持56.26％的比率，也可以使用其他比率。
如下定義iframe類別：
.resp-iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}position: absolute;這將為iframe提供相對(duì)於包裝器的位置，並將其放置在包裝器的填充上。
top: 0並left: 0用於將iframe定位在容器的中心。
width: 100%且height: 100%使IFRAME採取所有包裝的空間。
完成後，你應(yīng)該會(huì)得到一個(gè)回應(yīng)的iframe。
總結(jié)：在本文中，我們已經(jīng)看到了可以讓iframe實(shí)現(xiàn)自適應(yīng)高度的技巧。正如您所看到的，它實(shí)際上非常簡單，希望這篇文章可以為您節(jié)省數(shù)小時(shí)的嘗試時(shí)間。
【相關(guān)教學(xué)推薦】