ROG Innovation Logo

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

Canvas Grafik responsive in Website einbinden


Responsive Websites gehören zum Standard (sprich Webseiten bei denen sich das Design automatisch der Desktop-, Tablet- oder Smartphone-Bildschirmgrösse anpasst).
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 CSS-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ätzlichen DIV-Container umschlossen. Dies funktioniert nicht nur bei Canvas Grafiken, sondern auch bei Vektor Grafiken (svg).

Mit Padding-Bottom wird das Seitenverhältnis bestimmt.
Bei unserem Banner beträgt dieses 24, diese Zahlt setzt sich wie folgt zusammen: (220/900) *100 = 24.

Allgemeine Formel: (Grafik-Höhe/Grafik-Breite)*100 = einzusetzender Wert


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ältnis muss für jede Canvas Grafik einzeln angegeben und berechnet werden, ansonsten wird diese verzerrt dargestellt.


Canvas Grafik responsive in Website einbinden 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