48

I am trying to add a Google Map to my design, that is supposed to be responsive. I've used the same code that works out for images... But for some reason, the map's iframe resizes with dimensions I didn't pick.

HTML

<iframe src="http://maps.google.com/maps/ms?vpsrc=6&amp;ctz=-480&amp;ie=UTF8&amp;msa=0&amp;msid=210840796990572645528.00049770919ccd6759de3&amp;t=m&amp;ll=30.751278,68.203125&amp;spn=84.446143,175.429688&amp;z=2&amp;output=embed" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" width="635" height="300">    </iframe>​

and the CSS

iframe {
max-width: 100%;
height: auto;
width: auto; /*IE8 bug fix*/
vertical-align: middle;}

Or you can view it live and fiddle with it here: http://jsfiddle.net/corinne/pKUzU/ ​(if you cut away the CSS, you will see what i mean).

My question is how to make this iframe/map be responsive without losing its wanted height?

Corinne
  • 2,035
  • 3
  • 17
  • 15

1 Answers1

99

This solution is from Dave Rupert / Chris Coyier (I think). It requires a wrapper div but works pretty well.

HTML

    <div class="iframe-rwd">
        <iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=Seattle,+WA&amp;aq=0&amp;oq=seattle&amp;sll=37.822293,-85.76824&amp;sspn=6.628688,16.907959&amp;t=h&amp;ie=UTF8&amp;hq=&amp;hnear=Seattle,+King,+Washington&amp;z=11&amp;ll=47.60621,-122.332071&amp;output=embed"></iframe><br /><small><a href="https://maps.google.com/maps?f=q&amp;source=embed&amp;hl=en&amp;geocode=&amp;q=Seattle,+WA&amp;aq=0&amp;oq=seattle&amp;sll=37.822293,-85.76824&amp;sspn=6.628688,16.907959&amp;t=h&amp;ie=UTF8&amp;hq=&amp;hnear=Seattle,+King,+Washington&amp;z=11&amp;ll=47.60621,-122.332071" style="color:#0000FF;text-align:left">View Larger Map</a></small>
    </div>

CSS

.iframe-rwd  {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}
.iframe-rwd iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
cpg
  • 1,186
  • 9
  • 13
  • 1
    The code above will fill up it's container and hold it's original aspect ratio. This is nice for responsive grids. You can just pop this into whatever grid block you like and it will size itself automatically, even when things are resized. – cpg Oct 01 '12 at 18:05
  • 2
    thank you very much, it works, miracle! :) Wish I could give you some points, but unfortunately am still a newbie here! – Corinne Oct 01 '12 at 18:11
  • @cpg Do you have a reference for this code? Trying to understand it better. Specifically, it seems to work without the need for overflow:hidden, possibly due to the 100% sizing of the iframe? – iamkeir Apr 11 '13 at 14:42
  • http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php Looks like the padding-bottom above may be a little suspect. Still seems to work but a little more reading is probably in order. – cpg Apr 11 '13 at 15:48
  • Also of interest: http://alistapart.com/article/creating-intrinsic-ratios-for-video – cpg Apr 11 '13 at 15:52
  • don't know how it works but works perfectly.. thank you so much. – Kundan Singh Chouhan Feb 21 '15 at 18:04
  • Works like a charm! Thanks! – deyvw Apr 07 '16 at 19:28