Eigentlich… ja eigentlich müsste es ganz einfach sein:
Ich erstelle einen Artikel in Joomla, der links oben mit einem Bild beginnt, also top: 0px; left: 0px; und float: left; hat. Der Text fließt also rechts am Bild entlang und je nach Textlänge auch unterhalb des Bild weiter. Damit der Text Abstand vom Bild hat, erhält das Bild nach rechts und unten einen margin zugewiesen.
Nun möchte ich mir die Mühe sparen, für jedes Bild zwei oder sogar drei Auflösungsvarianten bereit zu stellen und diese abhängig von der Breite des Viewport durch zwei bis drei @media -Abfrage einzubinden. Ich fand nach einiger Suche im Web die Möglichkeit für Bilder "transform: scale(0.5, 0.5); zu nutzen. Das wäre eine äußerst elegante Lösung.
Resultat ist aber, dass der Platz für die ursprüngliche Bildgröße reserviert bleibt und das Bild in diesem reservierten Bereich zentriert und mit dem vorgegebenen Maßstab verkleinert erscheint. Was ich brauche, ist aber, dass das Bild weiterhin links oben in der Ecke beginnt.
Also hab ich das Bild mitsamt seiner Skalierungs-Definition in einen Div-Container gepackt und dessen Position auf top: 0px; und left 0px; gesetzt. Hat aber auch nix gebracht.
Frage: Gibt es eine Lösung mit "transform: scale(…)" oder bleibt es mir nicht erspart, zwei bis drei Bildvarianten bereit zu stellen?