Bild skalieren und dabei Form behalten

[MaT]

Hey Leute,

Zu allererst entschuldige ich mich dafür falls es diese Frage schon einmal gab.

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". Ich möchte nun das wenn ich das Fenster verkleiner die Bilder mit skalieren und die Form dabei auch beibehalten wird. Ich weiß zwar, dass ich mit width und height auch Prozente angeben kann, das würde aber in diesem Fall nicht funktionieren.

Hier noch zwei Screenshots, falls nicht klar wird was ich meine.

http://www11.pic-upload.de/19.03.15/t88ffxr2rxu8.png

http://www11.pic-upload.de/19.03.15/o13bis5c25i6.png

Schonmal im vorraus vielen Dank für die Antworten :)

[Matthias Apsel]

Om nah hoo pez nyeetz, MaT!

Ich möchte nun das wenn ich das Fenster verkleiner die Bilder mit skalieren und die Form dabei auch beibehalten wird. Ich weiß zwar, dass ich mit width und height auch Prozente angeben kann, das würde aber in diesem Fall nicht funktionieren.

Gib nur einen Wert vor. Damit berechnet der Browser unter Beibehaltung des Seitenverhältnisses den anderen.

Schonmal im vorraus vielen Dank für die Antworten :)

Gerrn ;-)

Matthias

[Tabellenkalk]

Hallo,

Schonmal im vorraus vielen Dank für die Antworten :)

Antworten auf welche Frrage?

Gruß Kalk

[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