ROG Innovation Logo

Tutorials, Gadgets und vieles mehr - Idea. Creation. Success. - Let's create the future!

Canvas Grafiken responsive einbinden


Responsive Websiten gehöhern immer mehr zum Standart (sprich Websiten bei denen sich das Design der Bildschirmgrösse anpasst z.B. Desktop, Tablet oder Smartphone).
Nun stellen sich aber viele Websiteprogrammierer die Frage wie sie eine Canvas Grafik oder Element responsive in ihre Website einbetten können.
Dies kann mit der untenstehenden Lösung sehr einfach realisiert werden und funktioniert super.

Beispielseite
Beispiel ansehen


Hierfür wird der "Embeded" Code einer Canvas Grafik einfach mit einem zusätzliche DIV Container umschlossen. Dies funktioniert nicht nur bei Canvas Grafiken sondern auch bei Vektorgrafiken (svg)
Mit Padding-Bottom wird das Seitenverhältnis bestummen. Bei unserem Banner beträgt dieses 24, diese Zahlt setzt sich wie folgt zusammen: (220/900) *100 = 24.44.

HTML Code
<div class="responsive-canvas" style="padding-bottom: 24%;">
<canvas id="canvasbanner" onclick="this.focus();" oncontextmenu="return false;" width=900 height=220 style="outline: none"></canvas>
<script type="text/javascript" src="canvasbanner.js"></script>
</div>

CSS Code
.responsive-canvas {
border: 0px solid #262626;
position: relative;
padding-top: 0px;
height: 0;
overflow: hidden;}

.responsive-canvas canvas {
border: 0px solid #262626;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;}

Hinweis
Das Seitenverhältniss muss für jede Canvas Grafik einzeln angegeben und berechnet werden, ansonsten wird diese verzerrt dargestellt.


download Download
responsivecanvas.zip


Enthaltene Dateien:
  • responsivecanvasbeispiel.html
  • diverse canvas Grafik Dateien
  • responsivecanvasbeispiel.js


Kommentare
Hier können sowohl Fragen wie auch ein Feedback zum oben stehenden Artikel eingetragen werden.


*Name:


*Kommentar:

(max. 500 Zeichen)

Terms:


*Pflichtfeld

Hinweis:
Der Eintrag wird nach einer redaktionellen Prüfung in den kommenden Tagen freigeschalten.

Top Themen

Suche
DoubleTwist
doubletwist iTunes mit Android Handy synchronisieren
Free YouTube Video Music
Youtube gratis Musik für Youtube Videos
Anzeige
Spenden
ROG Innovation unterstützen