怎么让iframe自适应宽高,且里面内容也自适应电脑端/手机端
时间: 2024-05-07 19:15:55 浏览: 307
IFRAME自适应
4星 · 用户满意度95%
要让iframe自适应宽高,可以使用以下方法:
1. 使用CSS中的“width:100%; height:100%;”来设置iframe的宽高为父元素的百分比,这样iframe就会自适应父元素的大小。
2. 使用JavaScript来获取父元素的大小,然后动态设置iframe的宽高。
```
var iframe = document.getElementById('myiframe');
var container = document.getElementById('container');
iframe.style.width = container.offsetWidth + 'px';
iframe.style.height = container.offsetHeight + 'px';
```
要让iframe里面的内容也自适应电脑端/手机端,可以使用以下方法:
1. 在iframe中嵌入响应式网页,这样网页会根据屏幕大小自适应。
2. 在iframe中嵌入响应式设计的网页元素,这样元素会根据屏幕大小自适应。
```
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.example.com"></iframe>
</div>
```
阅读全文