Headerbeeld boven de lijsten

Aan de bovenkant van een pagina met lijsten kan een afbeelding worden toegevoegd. In tegenstelling tot afbeeldingen op webpagina's wordt deze afbeelding nooit over de volle breedte van de pagina getoond, maar wordt die net zo breed als de pagina-inhoud (even breed als bijv. het menu of de lijst).

De wijze waarop de afbeelding wordt getoond, hangt af van of er een titel, tekst en/of toevoeg-knop is.

Optie 1: Geen titel, tekst of toevoegknop
Als er geen titel, tekst of toevoegknop wordt toegevoegd aan de afbeelding, wordt de afbeelding altijd helemaal getoond. Op alle schermformaten schaalt de afbeelding eenvoudig mee.

Optie 2: Wel een titel, tekst of toevoegknop
Het wordt nu ingewikkelder, omdat we nu moeten zorgen dat alle inhoud op alle schermformaten getoond kan worden. Er wordt nu eerst een vlak getekend. De titel, tekst en/of toevoegknop komen in dit vlak en samen bepalen ze de minimale hoogte van het vlak. De afbeelding wordt dan de achtergrond van het vlak. Hierbij moeten we rekening houden met alle schermformaten.

Als het vlak (toevallig) exact even groot is (hoogte en breedte) als de afbeelding, zie je de hele afbeelding. Maar dit zal niet vaak het geval zijn.
Als het vlak hoger is dan de hoogte van de afbeelding, wordt de afbeelding vergroot zodat die even hoog wordt als de hoogte van het vlak. De afbeelding is dan in de breedte te groot waardoor aan de linker- en de rechterkant delen van de afbeelding niet meer getoond worden.
Als het vlak minder hoog is dan de hoogte van de afbeelding, wordt de afbeelding aan de linker- en rechterkant passend getoond, waardoor aan de boven- en onderkant delen van de afbeelding niet meer worden getoond.

Dit principe zorgt ervoor dat we op alle schermformaten (van mobiel tot desktop) het beste resultaat krijgen.

P.S. We zijn op dit moment nog aan het proberen of het lukt om op een desktop-schermformaat de afbeelding wel zoveel mogelijk te laten zien, ook indien er weinig inhoud is (titel, tekst of toevoegknop). Maar het is ingewikkeld omdat we met alle schermformaten rekening moeten houden.