CSS怎么讓iframe實現(xiàn)自適應(yīng)高度的效果

小編給大家分享一下CSS怎么讓iframe實現(xiàn)自適應(yīng)高度的效果，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

10年積累的成都網(wǎng)站建設(shè)、網(wǎng)站制作經(jīng)驗，可以快速應(yīng)對客戶對網(wǎng)站的新想法和需求。提供各種問題對應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認識你，你也不認識我。但先網(wǎng)站制作后付款的網(wǎng)站建設(shè)流程，更有南和免費網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

iframe自適應(yīng)高度

出于演示目的，本文將使用視頻嵌入我們的iframe。首先，訪問視頻網(wǎng)址，點擊視頻下的“分享”，然后點擊“嵌入”，具體代碼如下：

<iframewidth="560"height="315"src="https://www.youtube.com/embed/dQw4w9WgXcQ"

frameborder="0"gesture="media"allow="encrypted-media"allowfullscreen></iframe>

接下來，我們需要刪除width=“560”height=“315”，因為這里是設(shè)置iframe的大小。由于我們需要自己設(shè)置尺寸，因此我們不需要這樣做。

使用CSS

之后，我們需要將iframe放在另一個html元素的<div>中，這是非常重要的，因為這個元素將調(diào)整你的iframe大小。然后將CSS類添加到包裝的元素中，將一個類添加到iframe，如下所示。

<divclass="resp-container">

<iframeclass="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)。這是因為在CSS中，position:absolute基于最接近的非靜態(tài)父元素定位元素。

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

padding-top:56.25%這就是關(guān)鍵所在。在CSS中，padding-top屬性可以設(shè)置百分比，這使我們的iframe保持正確的比例。通過使用百分比，它將根據(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)該得到一個響應(yīng)的iframe。

總結(jié)：在本文中，我們已經(jīng)看到了可以讓iframe實現(xiàn)自適應(yīng)高度的技巧。正如您所看到的，它實際上非常簡單，希望這篇文章可以給你節(jié)省數(shù)小時的嘗試時間。

看完了這篇文章，相信你對“CSS怎么讓iframe實現(xiàn)自適應(yīng)高度的效果”有了一定的了解，如果想了解更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

文章名稱：CSS怎么讓iframe實現(xiàn)自適應(yīng)高度的效果
文章URL：http://bm7419.com/article42/igeghc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站建設(shè)、定制網(wǎng)站、搜索引擎優(yōu)化、服務(wù)器托管、軟件開發(fā)、小程序開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)