Bild mittels CSS austauschen
in einem Projekt hatten wir an einem bestimmten Punkt die Notwendigkeit, Bilder möglichst einfach austauschen zu können. "Normale" Bilder sollten einfach durch hochauflösende Bilder ersetzt werden können. Ich wollte gerne auf JavaScript verzichten, denn da es sich nicht um redaktionell eingepflegte Bilder handelte - sondern um Logo, Icons u.ä. -, war eine reine CSS-Lösung möglich. Einer spontanen Eingebung folgend nutzte ich die Eigenschaft "content" und löschte mit dieser die Bildquelle, um dann dem Bild ein Hintergrundbild zu geben. Dafür musste das Bild natürlich konkrete Dimensionen besitzen. Deshalb muss es entweder als Blockelement oder als Inline-Blockelement formatiert sein.
Die endgültige Lösung bei jsFiddle arbeitet mit Media-Queries. Sie zeigt deshalb auf einem iPad 3 ein anderes Ergebnis, als auf einem normalen Rechner.
Das grundsätzliche Prinzip ist einfach:
img {
content: "";
background-image: url("http://ein-tolle-url");
width: 300px; /* konkrete Breite des Bildes */
height: 200px; /* konkrete Höhe des Bildes */
display: inline-block;
}
Ist doch interessant, dass man einem Bild ein Hintergrundbild mitgeben kann, oder?
Nachtrag: Fritz Weisshart wies mich in einem Kommentar darauf hin, dass die Technik im Firefox nicht funktioniert. Das ist richtig. Ich habe vor lauter Begeisterung nur im Chrome und dann auf dem iPad 3 getestet. Denn für dieses war die Technik ja gemacht. Für und wegen dessen Retina-Display. Die Technik ist also nur halb gut, wenn überhaupt. Und sie ist nicht ganz im Sinne der Specs, denn eigentlich ist "content" nur im Zusammenhang mit ":before" und ":after" gedacht. Aber: es funktioniert zumindest in einigen Browsern. ;-)
- ← Previous
Linkfutter 15 - Next →
Optimieren - Ausgabe 2012