Creating a fluid map that preserves aspect ratio by using Google Maps with Uncle Dave's Ol' Padded Box
Forked from Brad Frost's Pen Fluid Map Maintaining Aspect Ratio.
Forked from Brad Frost's Pen Fluid Map Maintaining Aspect Ratio.
A Pen by Captain Anonymous on CodePen.
| <!--Pattern HTML--> | |
| <div id="pattern" class="pattern"> | |
| <div class="map"> | |
| <iframe width="650" height="100" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=&aq=0&oq=pittsburgh&sll=40.440625,-79.995886&sspn=0.166706,0.363579&ie=UTF8&ll=40.697488,-73.979681&spn=0.664273,1.454315&t=m&z=10&output=embed"></iframe><br /><small><a href="https://maps.google.com/maps?f=q&source=embed&hl=en&geocode=&q=&aq=0&oq=pittsburgh&sll=40.440625,-79.995886&sspn=0.166706,0.363579&ie=UTF8&ll=40.697488,-73.979681&spn=0.664273,1.454315&t=m&z=10" style="color:#0000FF;text-align:left">View Larger Map</a></small> | |
| </div> | |
| </div> | |
| <!--End Pattern HTML--> | |
| <div class="container"> | |
| <section class="pattern-description"> | |
| <h1>Fluid Map Maintaining Aspect Ratio</h1> | |
| <p>Creating a fluid map that preserves aspect ratio by using <a href="http://codepen.io/chriscoyier/pen/115">Google Maps with Uncle Dave's Ol' Padded Box</a></p> | |
| <h2>Resources</h2> | |
| <ul> | |
| <li><a href="http://daverupert.com/2012/04/uncle-daves-ol-padded-box/">Uncle Dave’s Ol’ Padded Box</a></li> | |
| <li><a href="http://codepen.io/chriscoyier/pen/115">Google Maps with Uncle Dave’s Ol’ Padded Box by Chris Coyier</a></li> | |
| </ul> | |
| </section> | |
| <footer role="contentinfo"> | |
| <div> | |
| <nav id="menu"> | |
| <a href="http://bradfrost.github.com/this-is-responsive/patterns.html">←More Responsive Patterns</a> | |
| </nav> | |
| </div> | |
| </footer> | |
| </div> |
| .map { | |
| width: 90%; | |
| height: 0; | |
| margin: 0 auto; | |
| padding-top: 33.33%; | |
| position: relative; | |
| } | |
| .map iframe { | |
| width: 100%; | |
| height: 100%; /* had to specify height/width */ | |
| position: absolute; | |
| top: 0; | |
| right: 0; | |
| left: 0; | |
| bottom: 0; | |
| } |
| <link href="http://bradfrost.github.com/this-is-responsive/styles.css" rel="stylesheet" /> |