Bild skalieren und dabei Form behalten

[Gunnar Bittersmann]

@@MaT:

Ich muss im Rahmen einer Projektarbeit in Joomla eine Webseite für ein Restaurant erstellen und möchte das Menü der Speisekarte aus zusammengesetzten Bildern "zusammensetzen".

Ein Bild mit verlinkten Bereichen aus Einzelstücken zusammenzusetzen ist nicht die beste Idee.

Dafür gibt es image maps. Allerdings sind bei denen die clickbaren Bereiche in Pixel-Stein gemeißelt; sie skalieren nicht mit dem Bild mit – unbrauchbar für flexible Bilder. Man bekommt aber auch mitskalierende clickbare Bereiche hin – mit SVG. Vorwärts zum Beispiel. Browserunterstützung testen und ggfs. Fallback einbauen!

In deinem Fall würde ich aber auf die Textgrafik verzichten und Webfonts verwenden (zumindest für die Links). Dann sind spätere Änderungen einfach. Positionierung der Links mit Flexbox. Verzierung der Box mit border-image.

LLAP