Tipps und Tricks » kleine webmaster FAQ

ID #1830

eine responsive Image-Box (demo figure)

Hallo,

mit diesem Experiment versuche ich gleich 2 Versionen einer imagebox zu testen, einmal mit einer header-section-footer-Struktur und 1x mit dem HTML-Element figure.

Ist JavaScript deaktiviert, wird das grösste Bild angezeigt, welches sich prozentual an den jeweiligen viewport anpasst.

Mit JavaScript wird das Bild dann auf die kleinste Breite verkleinert und mittels Zoom vergrößert. Das ganz im Fließtext mit float:left !

Da im figure-Element nur eine Überschrift bzw. Untertitel figcaption erlaubt ist (oder nur möglich ?) habe ich noch ein header-Element hinzugefügt. Ob das man so machen darf, entzieht sich allerdings meiner Kennntnis. Man muss diese Version nochmal gut mit verschiedenen browsern testen, bevor man es einsetzt. Nicht alles funktioniert im figure-tag so wie es soll, das Element rückt automatisch ein und man muss margin-left auf 0 setzen, dann passt es. Auch die Textformatierung in figcaption will einfach nicht funktionieren :)) da muss ich noch dazu lernen !

Die demo sollte man sich erst mit deaktivierten JavaScript bei voller Fenstergrösse oder Vollbild und dann bei kleinster Grösse anschauen. Dann mit aktivierten JavaScript die Zoomfunktion testen. Interessant wäre eine Test mit modernizr oder CSS Pie, und wie es sich in alten browsern verhält.

Die 1. imagebox mit zusätzlichen DIV-Elementen funktioniert im Internet Explorer 8 so einigermassen noch quasi ausreichend - das spartanische figure-Element sieht dagegen grauenvoll aus. Opera portable 12.15,Opera 15, firefox 22 und Chrome 28 stellen die Elemente korrekt und identisch dar.

Diese demo und deren Code ist nicht für die Verwendung auf anderen websites frei gegeben.

Da Prozentwerte insbesondere bei Bildern, die performance stark beeinträchtigen können, suche ich noch nach einer besseren Lösung !

.
.
 

Tags: Bild, CSS3, figure, Foto, HTML5, Image, webdesign, webmaster

Verwandte Artikel:

Letzte Änderung des Tests: 2018-01-17 13:25
Autor: pipe

Leser: 3842 (14.07 pro Tag )


Revision: 1.0

Artikel bewerten

bisher bewertet
3.94 (323 ×)

1 2 3 4 5

Kommentar schreiben


Spam Schutz

..