您好,登錄后才能下訂單哦!
小編給大家分享一下CSS怎么讓iframe實(shí)現(xiàn)自適應(yīng)高度的效果,希望大家閱讀完這篇文章之后都有所收獲,下面讓我們一起去探討吧!
iframe自適應(yīng)高度
出于演示目的,本文將使用視頻嵌入我們的iframe。首先,訪問(wèn)視頻網(wǎng)址,點(diǎn)擊視頻下的“分享”,然后點(diǎn)擊“嵌入”,具體代碼如下:
<iframewidth="560"height="315"src="https://www.youtube.com/embed/dQw4w9WgXcQ"
frameborder="0"gesture="media"allow="encrypted-media"allowfullscreen></iframe>
接下來(lái),我們需要?jiǎng)h除width=“560”height=“315”,因?yàn)檫@里是設(shè)置iframe的大小。由于我們需要自己設(shè)置尺寸,因此我們不需要這樣做。
使用CSS
之后,我們需要將iframe放在另一個(gè)html元素的<div>中,這是非常重要的,因?yàn)檫@個(gè)元素將調(diào)整你的iframe大小。然后將CSS類(lèi)添加到包裝的元素中,將一個(gè)類(lèi)添加到iframe,如下所示。
<divclass="resp-container">
<iframeclass="resp-iframe"src="https://www.youtube.com/embed/dQw4w9WgXcQ"gesture="media"allow="encrypted-media"allowfullscreen></iframe>
</div>
使用以下樣式定義包裝類(lèi):
.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保持正確的比例。通過(guò)使用百分比,它將根據(jù)元素的寬度計(jì)算要使用的填充。在我們的示例中,我們希望保持56.26%的比率,也可以使用其他比率。
按如下方式定義iframe類(lèi):
.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)該得到一個(gè)響應(yīng)的iframe。
總結(jié):在本文中,我們已經(jīng)看到了可以讓iframe實(shí)現(xiàn)自適應(yīng)高度的技巧。正如您所看到的,它實(shí)際上非常簡(jiǎn)單,希望這篇文章可以給你節(jié)省數(shù)小時(shí)的嘗試時(shí)間。
看完了這篇文章,相信你對(duì)“CSS怎么讓iframe實(shí)現(xiàn)自適應(yīng)高度的效果”有了一定的了解,如果想了解更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道,感謝各位的閱讀!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。