Bilderpfad dynamisch ändern

[jeffglennfox]

Hallo, ich habe folgendes Problem.

Aus einer Datenbankabfrage kommt eine Liste von Ergebnisse, die dynamisch verschiedene Bilder erzeugen sollen. Ganz konkret Flaggen anhand der Länderinformation aus der Datenbankabfrage.

Diese haben beispielsweise den Namen "de-32.png", also "de" für das Land und "32" für die Pixelgröße.

Nun kommt das eigentliche Problem:

Die Größe der Flaggen soll sich anhand der verfügbaren Bildschirmbreite ändern.

Die Bildgröße der Flaggen (als Hintergrundbild) könnte man ja auch per CSS Media-Queries manipulieren, jedoch fehlt dann die Information zu dem jeweiligen Land.

Der Pfad für das Bild müsste sich daher dynamisch zum einen aus der SQL-Abfrage (Länderkürzel) über PHP - und aus der ermittelten Bildschirmbreite per Javascript bzw. zusammensetzen.

Hat jemand einen Lösungsansatz oder eine Idee ob so etwas überhaupt geht.

Danke und Gruss

Markus

 

[Dormilich]

Nimm ein SVG-Bild, das kannst du nach Belieben skalieren.

https://www.mediaevent.de/svg-in-html-seiten/

 

[jeffglennfox]

Hallo,

danke für den Hinweis. Die Überlegung hatte ich auch bereits. Da ich aber eine bereits bestehende Grafik umwandeln möchte, war das Ergebnis , dass diese als SVG nicht von gleicher Qualität war (nach Ausprobieren zweier Online-Tools). Gibt es ein Tool bzw. ein Programm , dass ein PNG 1:1 in SVG umwandelt ?

Gruss von Markus

 

[kkapsner]

1:1 von PNG nach SVG geht nicht, da PNG ein Rasterformat und SVG ein Vektorformat ist.

Aber prinzipiell kann man dein Problem lösen. Du kannst ja per JS in dem String, der die URL repräsentiert einfach einen Platzhalter durch die gewünschte Auflösung ersetzen.