javascript - 如何在浏览器窗口调整大小时自动调整 iframe 内容大小？

Question

我现在正在制作一个网站，它将在 map (不是谷歌地图)上显示一个地点。我使用 iframe 来包含 map ，我希望 map 根据浏览器窗口宽度调整宽度。

这是我的代码:

<iframe width='1800' height='300' frameborder='0' scrolling='no' marginheight='0' marginwidth='0' src='http://f.amap.com/xxxxxxxxxx'></iframe>

要调整 iframe 的大小，我只需使用 jquery 代码更改 iframe 的宽度和高度，如下所示:

$(window).resize(function(){
var window_width = $(window).width();
$('iframe').width(window_width);
});

但是，它只会改变 iframe 的宽度，无法调整内容的大小。如何在窗口调整大小时调整内容的大小？非常感谢!

Answer 1

您只需将ma​​x-width 属性 设置为100%。

<iframe width='1800' height='300' style="max-width:100%" frameborder='0' scrolling='no' marginheight='0' marginwidth='0' src='http://f.amap.com/xxxxxxxxxx'> 
</iframe>

这将根据浏览器窗口调整。