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

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.