如今越來越多的人使用手機(jī)瀏覽網(wǎng)頁，因此網(wǎng)站的響應(yīng)能力越來越重要。在手機(jī)上測試網(wǎng)站時(shí)，嘗試了很多次才弄清楚為什么我的視頻沒有達(dá)到我的預(yù)期，直到發(fā)現(xiàn)了一個(gè)很棒的CSS技巧，可以讓iframe實(shí)現(xiàn)自適應(yīng)高度。接下來就和大家分享iframe動(dòng)態(tài)實(shí)現(xiàn)自定義高度的方法，感興趣的小伙伴可以參考借鑒一下。
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ì)算要使用的填充。在我們的示例中，我們希望保持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采取所有包裝的空間。
完成后，你應(yīng)該得到一個(gè)響應(yīng)的iframe。
總結(jié)：在本文中，我們已經(jīng)看到了可以讓iframe實(shí)現(xiàn)自適應(yīng)高度的技巧。正如您所看到的，它實(shí)際上非常簡單，希望這篇文章可以給你節(jié)省數(shù)小時(shí)的嘗試時(shí)間。
【相關(guān)教程推薦】
1、CSS教程