Bilder dynamischer Breite

[Trendy Handy]

Guten Tag liebes Forum,

ich habe bis vor 3 Jahren sehr intensiv HTML, CSS, JavaScript (Ajax) und PHP gecoded/programmiert. Beruflich musste ich mich dann auf andere Sprachen spezialisieren (VBScript, Windows-Bash, PowerShell) Nun fange ich wieder an, ein kleines Projekt (Webseite eines Vereins) zu erstellen.

Der Verein möchte eine horizontale und eine vertikale Navigation. In der vertikalen kommen Menüpunkte wie "Geschichte", "Termine" etc rein. In der horizontalen (die oberhalb der Seite angesiedelt ist) kommen die Untergruppierungen des Vereins (je nach Alter gehört man im Verein zu einer bestimmten Gruppe) hinein. Das ist alles prinzipiell kein Problem.
Als optisches Schmankerl möchte der Verein eine in die Breite gezogene Raute als Menüpunkt, auf der die Beschriftung steht:
   __________________________         __________________________
  /                         /        /                         /
 /       GRUPPE 1          /        /       GRUPPE 2          /
/_________________________/        /_________________________/

Auch kein Problem.
Dieser optische Menüpunkt soll, wie man das von "Tabs" gewohnt ist, oben an dem Container für den Seiteninhalt anheften. Auch kein Problem.

Das Problem kommt erst jetzt: Bei geringerer Bildschirmauflösungen oder verkleinertem Browserfenster siedeln sich die horizontalen Menüpunkte in mehreren Reihen an. Das ist natürlich nicht gewollt.

Gibt es eine Möglichkeit, das zu verhindern? Diese Raute sollte mitwachsen bzw mitschrumpfen.

Liebe Grüße
Trendy Handy