以通過以下方式實現前端讓iframe框架內的內容高寬撐開:
- 在iframe標籤中設置
scrolling="no"和frameborder="0",禁用滾動條和邊框。 - 在iframe標籤後添加一個
<div>,並給該<div>設置樣式position: relative; width: 100%; height: 0; padding-bottom: 56.25%;。其中,padding-bottom的值應該是iframe內嵌內容的縱橫比例(例如16:9的視頻應該設置爲padding-bottom: 56.25%)。 - 使用絕對定位在上述
<div>內部放置一個子元素,並設置其樣式爲position: absolute; top: 0; left: 0; width: 100%; height: 100%;。
完整代碼示例如下所示:
<div style="position: relative; width: 100%; height: 0; padding-bottom: 56.25%;">
<iframe src="https://example.com" frameborder="0" scrolling="no"></iframe>
<div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></div>
</div>