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:
@Image copyright
<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):
<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
@Image copyright
<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>