Image Markup and Ratios

Alle Einheiten des Styleguides basieren auf der Annahme, dass Bilder in stimmigen Größenverhältnissen verwendet werden. Deshalb ist es unerlässlich alle verwendeten Bilder anhand ihrer Ratios zu prüfen und gegebenenfalls an ein erlaubtes Bildformat anzupassen. Nur wenn alle Bilder im erlaubten Format sind, kann davon ausgegangen werden, dass die Seite sich in allen Bildschirmgrößen und Variationen korrekt verhält.

Zusätzlich zu den Bildgrößen muss immer überprüft werden ob bei Bildern mit Text Overlays, der Kontrast noch ausreichend hoch ist um die Barrierefreiheit zu erhalten. Hier ist eine hohe Eigenverantwortung und gründliche Selbstüberprüfung unerlässlich.

Ratios

Hier sehen Sie die wichtigsten Bildratios im Überblick. Einige Sonderformate auf speziellen Seiten werden hier nicht beschrieben. Bitte beachten Sie auch, dass nicht jedes Modul auf allen Seitentypen erlaubt ist. Mehr Details finden Sie im Berlin.de Support Wiki.

Hinweis: Für die meisten Teaserformat im 4:3 Format empfiehlt sich eine Mindestgröße von 480 x 360 Pixel.

Ratio
Teaser 4:3
Text/Bild Modul 4:3 und 3:4
Marketing-Teaser 4:3
Poster Teaser 4:5
Bildergalerie Originalratio im 2:1 Container
Bühne 2:1
Map 4:3
Logogalerie Originalratio im 1:1 Containergrid
Testimonial 4:3
FAQ 4:3 und 3:4
Artikelbild 2:1
Homepage Hero (Startseite, volle Breite) 3:1 (andere Formate nach Absprache möglich)

Default Markup

The default image markup contains .image__image, .image__caption and .image__copyright inside an .image container:

Alternative Bildbeschreibung

Image caption

<div class="image">
        <div class="image__image">
            <img src="../../dummy/placeholder_4x3_1200.jpg" alt="Alternative Bildbeschreibung" >
        </div>
        <p class="image__caption">
            Image caption
        </p>
        <p class="image__copyright">
            @Image copyright
        </p>
</div>
 

Image With Overlay Markup

The .image__overlay container adds an overlay area to the image:

The .image--darken class on the .image container darkens the image (default):

Alternative Bildbeschreibung
Image Overlay
<div class="image image--darken"> 
        <div class="image__image">
            <img src="../../dummy/placeholder_4x3_1200.jpg" class="image--darken" alt="Alternative Bildbeschreibung" >
        </div>
        <div class="image__overlay">                 <a href="#" class="title" data-mainlink="true">
                Image Overlay
                </a>
                <p class="image__copyright">
                Image copyright
                </p>        
        </div>
</div>
 

The .align--bottom class on the .image__overlay container change the position of the text and copyright:

<div class="image image--darken"> 
        <div class="image__image">
            <img src="../../dummy/placeholder_4x3_1200.jpg" class="image--darken" alt="Alternative Bildbeschreibung" >
        </div>
        <div class="image__overlay align--bottom">                 <a href="#" class="title" data-mainlink="true">
                Image Overlay (align bottom)
                </a>
                <p class="image__copyright">
                Image copyright
                </p>        
        </div>
</div>
 

Image forced into a 2:1 container (Articleimage)

.image.image--force-2x1

Alternative Bildbeschreibung

Caption

<div class="image image--force-2x1">
        <div class="image__image">
            <img src="../../dummy/placeholder_4x5.jpg" alt="Alternative Bildbeschreibung" >
        </div>
        <p class="image__caption">
            Caption
        </p>
        <p class="image__copyright">
            @Image copyright
        </p>
</div>