CSS: Bildausschnitt gleichmässig

  • Hallo zusammen,


    ich möchte zum normalen Menü auch Kacheln im Content darstellen um auf Menü-Items zu verlinken, damit möchte ich für den jeweiligen Unterbereich wichtige Unterpunkte darstellen.


    Aktuell beschäftige ich mit Gantry5 als Framework und den dort möglichen Particles, um eine Art Menü-Band darzustellen, ich ein Particle soweit erstellt und die Eingabefelder definiert, soweit klappt das. Pro Menüpunkt verlinke ich auf ein Bilder, diese sollen dann als Quadrat (mobiles Device) oder im 16:9 Format (Desktop) dargestellt werden, die Beschriftung lege ich als Overlay mit teil-transparenter Hintergrundfarbe auf den unteren Rand des Bildes.


    Ich möchte im Particle aber sicherstellen das die Bilder als Quadart oder mit 16:9 Format dargestellt werden, als Basis möchte ich die kleinere Grösse des jeweiligen Bildes nehmen damit ich das gewünschte Format bekommen aber das maximale Bild als Grundlage verwende.


    Wie könnte ich per CSS sowas realisieren?


    Wäre Euch für ein paar Tipps sehr dankbar da ich mich mit CSS noch nicht so auskennen.



    Viele Grüsse,

    Daniel