iframe自适应宽高

要让iframe自适应宽高，可以使用以下的方法：

1. 使用CSS设置iframe的宽高为100%：

iframe {
  width: 100%;
  height: 100%;
}

2. 通过JavaScript动态设置iframe的宽高：

var iframe = document.getElementById('my-iframe');
iframe.style.width = window.innerWidth + 'px';
iframe.style.height = window.innerHeight + 'px';

上述代码将iframe的宽高设置为窗口的宽高。如果需要在窗口大小改变时自适应，可以将代码包装在resize事件处理程序中：

window.addEventListener('resize', function() {
  iframe.style.width = window.innerWidth + 'px';
  iframe.style.height = window.innerHeight + 'px';
});

这样，当窗口大小改变时，iframe的宽高会自动调整为新的窗口大小。

相关问题

怎么让iframe自适应宽高，且里面内容也自适应电脑端/手机端

要让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>

iframe 自适应高度

对于 iframe 的自适应高度，你可以使用以下方法：

1. 使用 JavaScript 动态调整 iframe 的高度：在父页面中，通过 JavaScript 获取 iframe 的内容高度，然后将这个高度应用到 iframe 的样式中。你可以使用以下代码：

// 获取 iframe 对象
var iframe = document.getElementById('your-iframe-id');

// 设置 iframe 的高度为内容的高度
iframe.style.height = iframe.contentWindow.document.body.scrollHeight + 'px';

请确保在 iframe 内容完全加载后再执行此代码，否则可能无法正确获取内容高度。

2. 使用 CSS 中的 `aspect-ratio` 属性：如果你想要 iframe 的高度与宽度保持一定的比例，可以使用 CSS 中的 `aspect-ratio` 属性。这个属性可以用于设置元素的宽高比。例如，如果你希望 iframe 的宽高比为 16:9，可以使用以下代码：

iframe {
  aspect-ratio: 16/9;
}

这样，当父容器的宽度发生变化时，iframe 的高度会自动根据宽高比进行调整。

这些方法可以帮助你实现 iframe 的自适应高度。根据你的具体需求和情况，选择适合的方法来实现即可。