Currently, I am in the process of building a website that will showcase a location on a map (not Google Maps). To achieve this, I have utilized an iframe to contain the map and my goal is for the map to adjust its width based on the width of the browser window.
This snippet shows the code I have implemented:
<iframe width='1800' height='300' frameborder='0' scrolling='no' marginheight='0' marginwidth='0' src='http://f.amap.com/xxxxxxxxxx'></iframe>
In order to resize the iframe dynamically, I have used jQuery to modify the width and height attributes according to the browser window dimensions like so:
$(window).resize(function(){
var window_width = $(window).width();
$('iframe').width(window_width);
});
Despite successfully changing the width of the iframe element, the content within it does not resize accordingly. How can I ensure that both the iframe and its contents adjust proportionally when the window is resized? Your assistance is greatly appreciated!