Permalink
Find file
402ff78 Jan 12, 2017
Niklaus Gerber Added demo page
47 lines (39 sloc) 1.25 KB
<!DOCTYPE html>
<html dir='ltr' lang='en'>
<head>
<title>Responsive Google or Bing maps</title>
<style>
main {
width: 950px;
max-width: 90%;
margin: auto;
}
/* Flexible iFrame */
.Flexible-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.Flexible-container iframe,
.Flexible-container object,
.Flexible-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<main>
<h1>Resize your browser window</h1>
<!-- Responsive iFrame -->
<div class="Flexible-container">
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.ch/maps?f=q&amp;source=s_q&amp;hl=de&amp;geocode=&amp;q=Bern&amp;aq=&amp;sll=46.813187,8.22421&amp;sspn=3.379772,8.453979&amp;ie=UTF8&amp;hq=&amp;hnear=Bern&amp;t=m&amp;z=12&amp;ll=46.947922,7.444608&amp;output=embed&amp;iwloc=near"></iframe>
</div>
</main>
</body>
</html>