Tutorials
Einige nützliche Hilfen und Code-Schnipsel, die ich immer wieder benötige und deshalb hier für alle sammle.
Google Maps: Wie mache ich das embedded Iframe responsive?
Hat man eine Google Map via iframe eingebunden und möchte das Ganze responsive haben, so geht das mit folgendem CSS und HTML Code.
.google-maps {
position: relative;
padding-bottom: 75%; // This is the aspect ratio
height: 0;
overflow: hidden;
}
.google-maps iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}
<div class="google-maps">
<iframe src="https://www.google.com/maps/embed?....."></iframe>
</div>
<style></p> <p>.google-maps {</p> <p> position: relative;</p> <p> padding-bottom: 75%; // This is the aspect ratio</p> <p> height: 0;</p> <p> overflow: hidden;</p> <p>}</p> <p>.google-maps iframe {</p> <p> position: absolute;</p> <p> top: 0;</p> <p> left: 0;</p> <p> width: 100% !important;</p> <p> height: 100% !important;</p> <p>}</p> <p></style>
Demo
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d160843.9742697086!2d6.967322349999988!3d50.95724495!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47bf259169ab2fe5%3A0x42760fc4a2a77f0!2zS8O2bG4!5e0!3m2!1sde!2sde!4v1414684502027" width="800" height="500" frameborder="0" style="border:0"></iframe>
Kommentare
Es gibt noch keine Kommentare. Sei der Erste!
Hinterlasse einen Kommentar