Das Einholen von Informationen wie auch das Durchführen von Bestellungen wird über das Internet zunehmend mehr und mehr mit mobilen Endgeräte erledigt. Die Anforderung ist daher Websites mit Bildinhalten und 360 Grad Animationen "responsive" zu gestalten.
Bei Verwendung eines iFrames mit fixen Height + Width Werten kann das Seitenverhältnis bei verschiedenen Anzeigegrößen darunter leiden, ein unerwünschter Scrollbalken oder zu viel Weißraum angezeigt werden.
Typischer iFrame code
<iframe src="https://www.mydomain.com/360grad/rollboy_braun/rollboy_braun.html" height="340" width="458" frameborder="0" allowfullscreen </iframe>
Anpassen des Codes
Als erster Schritt wird die fix gesetzte Breite + Höhe (width="458" and height="340") des iFrames entfernt, da wir diese Werte dynamisch setzen.
<div class="resp-container">
<iframe class="resp-iframe" src="https://www.mydomain.com/360grad/rollboy_braun/rollboy_braun.html" allowfullscreen></iframe>
</div>
Dafür ist es notwendig den iFrame in das html element <div> einzupacken welches mit Hilfe einer CSS class die Parameter für den <div>-Container definiert. Eine weitere class gibt hier die Werte für den iFrame
vor.
Wrapper class für den <div>-Container:
.resp-container {
position: relative;
padding-bottom: 66.67%;
height: 0;
overflow: hidden;
width: 100%;
height: auto;
}
Class für den iframe:
.resp-iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
Mit dieser Konfiguration sollte nun der iFrame und somit die 360 Grad Animation "responsive" sein.
padding-bottom: Die padding-bottom Eigenschaft legt den unteren Innenabstand eines Elementes fest. Der Innenabstand ist der Bereich zwischen dem Inhalt und dem Rahmen. Mit der Angabe des prozentualen Wertes, wird die Breite des umschließenden Blocks festgelegt und somit die Höhe dynamisch angepasst.
Animation im Format
- 2/3 = 66,67%
- 3/4 = 75%
- 1/1 = 100%
Website mit BaukastenSystem
Es ist darauf zu achten, dass je nach Art der Website der Code entsprechend einzufügen ist. So kann es bei Verwendung eines Baukastensystems, wie zB.: Jimdo, notwendig sein, diesen aufzuteilen.
-
Der Codeteil von <style> bis </style> ist hierbei in den "Head"-Teil des Baukastensystems zu
kopieren.
- Der Codeteil von <div> bis </div> is hierbei in den Widget/HTML-Teil der (Unter)seite zu kopieren.
Beispiel: Vollständiger Code
<style>
.resp-container {
position: relative;
padding-bottom: 75%;
overflow: hidden;
width: 100%;
height: auto;
}
.resp-iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
</style>
<div class="resp-container">
<iframe class="resp-iframe" src="https://www.mydomain.com/360grad/rollboy_braun/rollboy_braun.html" allowfullscreen></iframe>
</div>
Thanks to the blog of Theodo: https://blog.theodo.com/2018/01/responsive-iframes-css-trick/
Kommentar schreiben