Bilder dienen der Gestaltung des Inhaltsbereichs. Sie werden im Seiteninhalt eingebunden. Auf die Urheberrechtsangabe und dessen Kontrast zum Bildinhalt ist zu achten.

Bild zentriert

Beispiel

Blick von einer Brücke auf eine Autobahnbaustelle

Bild vergrößern

Loremipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et.

Quelltext

Quelltext kopieren

<div class="bb-text-justify">

    <div class="bb-image-centered-container" style="width: 500px;">
        <a href="#" title="Bild vergrößern"
           data-featherlight="bild_groß.jpg"><img
                alt="Alternativer Bild-Text"
                title="Titel zum Bild"
                class="bb-image bb-image-centered"
                src="bild_kleiner.jpg"> <i class="bb-image-caption">
                Bild vergrößern
                <i title="Bild vergrößern" class="bb-icon-text fa fa-search fa-lg"></i>
            </i>
        </a>
    </div>

    <p>Loremipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
        invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam
        et.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
        invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam
        et.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
        invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam
        et.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
        invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam
        et.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
        invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam
        et.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
        invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam
        et. <br><br></p>
</div>

Bild links umflossen

Beispiel

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et. Bild vergrößern nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt. et.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et.

Quelltext

Quelltext kopieren

<div class="bb-text-justify">
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
        invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam
        et.
         <span class="bb-image-float-left" style="width:20%">
            <a href="#" title="Bild vergrößern"
               data-featherlight="bild_groß.jpg">
                <img class="bb-image" width="100%"
                     src="bild_kleiner.jpg"
                     alt="Alternativer Bild-Text"
                     title="Titel zum Bild">
                <i class="bb-image-caption">
                    Bild vergrößern
                    <i title="Bild vergrößern" class="bb-icon-text fa fa-search fa-lg"></i>
                </i>
            </a>
        </span>

        nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
        vero eos et accusam
        et.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
        invidunt.
        et.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
        invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam
        et.<br><br>
    </p>
</div>

Bild rechts umflossen

Beispiel

ILorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor Bild vergrößern invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et.

Quelltext

Quelltext kopieren

<div class="bb-text-justify">
    <p>ILorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
        invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam
        et.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor

        <span class="bb-image-float-right" style="width:20%">
            <a href="#" title="Bild vergrößern"
               data-featherlight="bild_groß.jpg">
                <img alt="Alternativer Bild-Text"
                     title="Titel zum Bild"
                     class="bb-image bb-image-float-right" width="200"
                     src="bild_kleiner.jpg">
                <i class="bb-image-caption">
                    Bild vergrößern
                    <i title="Bild vergrößern" class="bb-icon-text fa fa-search fa-lg"></i>
                </i>
            </a>
        </span>

        invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam
        et. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
        invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam
        et. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
        invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam
        et. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
        invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam
        et. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
        invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam
        et. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
        invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam
        et. <br><br></p>
</div>

Bild oben-links umflossen

Beispiel

Bild vergrößern

ILorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et.

Quelltext

Quelltext kopieren

<div class="bb-text-justify">

    <span class="bb-image-float-top-left" style="width:20%">
        <a href="#" title="Bild vergrößern"
           data-featherlight="bild_groß.jpg">
            <img alt="Blick von einer Brücke auf eine Autobahnbaustelle" title="Blick von einer Brücke auf eine
                 Autobahnbaustelle" class="bb-image bb-image-float-top-left"
                 width="150" src="bild_kleiner.jpg">
            <i class="bb-image-caption">
                Bild vergrößern
                <i title="Bild vergrößern" class="bb-icon-text fa fa-search fa-lg"></i>
            </i>
        </a>
    </span>

    <p>ILorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
        invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam
        et.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
        invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam
        et.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
        invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam
        et.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
        invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam
        et.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
        invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam
        et.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
        invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam
        et. <br><br></p>
</div>

Bild oben-rechts umflossen

Beispiel

Bild vergrößern

Quelltext

Quelltext kopieren

<div class="bb-text-justify">

    <span class="bb-image-float-top-right" style="width:20%">
        <a href="#" title="Bild vergrößern"
           data-featherlight="bild_groß.jpg">
            <img alt="Alternativer Bild-Text"
                 title="Titel zum Bild"
                 class="bb-image bb-image-float-top-right"
                 width="270" src="bild_kleiner.jpg">
            <i class="bb-image-caption">
                Bild vergrößern
                <i title="Bild vergrößern" class="bb-icon-text fa fa-search fa-lg"></i>
            </i>
        </a>
    </span>

    <p>Loremipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
        invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam
        et.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
        invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam
        et.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
        invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam
        et.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
        invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam
        et.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
        invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam
        et.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
        invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam
        et. <br><br></p>
</div>

Bild unten nicht umflossen

Beispiel

Bild vergrößern

So, once we've made the plant, how do we go out? Hope you have something more elegant in mind than shooting me in the head? A kick. What's a kick? This, Ariadne, would be a kick.

What is the most resilient parasite? Bacteria? A virus? An intestinal worm? An idea. Resilient... highly contagious. Once an idea has taken hold of the brain it's almost impossible to eradicate. An idea that is fully formed - fully understood - that sticks; right in there somewhere.

Quelltext

Quelltext kopieren

<div class="media-object bb-media-object">
    <div class="media-object-section bottom" style="width: 50%">
        <div class="thumbnail bb-thumbnail">
            <a href="#" title="Bild vergrößern"
               data-featherlight="bild_groß.jpg"><img
                       alt="Alternativer Bild-Text"
                       title="Titel zum Bild"
                       class="bb-image" style="width: 100%"
                       src="bild_kleiner.jpg"> <i class="bb-image-caption">
                    Bild vergrößern
                    <i title="Bild vergrößern" class="bb-icon-text fa fa-search fa-lg"></i>
                </i>
            </a>
        </div>
    </div>
    <div class="media-object-section bb-text-justify">
        <p>So, once we've made the plant, how do we go out? Hope you have something more elegant in mind
            than shooting me in the head? A kick. What's a kick? This, Ariadne, would be a kick.</p>
        <p>What is the most resilient parasite? Bacteria? A virus? An intestinal worm? An idea.
            Resilient... highly contagious. Once an idea has taken hold of the brain it's almost
            impossible to eradicate. An idea that is fully formed - fully understood - that sticks;
            right in there somewhere.</p>
        <p>What is the most resilient parasite? Bacteria? A virus? An intestinal worm? An idea.
            Resilient... highly contagious. Once an idea has taken hold of the brain it's almost
            impossible to eradicate. An idea that is fully formed - fully understood - that sticks;
            right in there somewhere.</p>
        <p>What is the most resilient parasite? Bacteria? A virus? An intestinal worm? An idea.
            Resilient... highly contagious. Once an idea has taken hold of the brain it's almost
            impossible to eradicate. An idea that is fully formed - fully understood - that sticks;
            right in there somewhere.</p>
        <p>What is the most resilient parasite? Bacteria? A virus? An intestinal worm? An idea.
            Resilient... highly contagious. Once an idea has taken hold of the brain it's almost
            impossible to eradicate. An idea that is fully formed - fully understood - that sticks;
            right in there somewhere.</p>
    </div>
</div>

Bild mittig nicht umflossen

Beispiel

Bild vergrößern

So, once we've made the plant, how do we go out? Hope you have something more elegant in mind than shooting me in the head? A kick. What's a kick? This, Ariadne, would be a kick.

Quelltext

Quelltext kopieren

<div class="media-object bb-media-object">
    <div class="media-object-section middle" style="width: 50%">
        <div class="thumbnail bb-thumbnail">
            <a href="#" title="Bild vergrößern"
               data-featherlight="bild_groß.jpg"><img
                        alt="Alternativer Bild-Text"
                        title="Titel zum Bild"
                        class="bb-image" style="width: 100%"
                        src="bild_kleiner.jpg"> <i class="bb-image-caption">
                    Bild vergrößern
                    <i title="Bild vergrößern" class="bb-icon-text fa fa-search fa-lg"></i>
                </i>
            </a>
        </div>
    </div>
    <div class="media-object-section bb-text-justify">
        <p>So, once we've made the plant, how do we go out? Hope you have something more elegant in mind
            than shooting me in the head? A kick. What's a kick? This, Ariadne, would be a kick.</p>
        <p>What is the most resilient parasite? Bacteria? A virus? An intestinal worm? An idea.
            Resilient... highly contagious. Once an idea has taken hold of the brain it's almost
            impossible to eradicate. An idea that is fully formed - fully understood - that sticks;
            right in there somewhere.</p>
        <p>What is the most resilient parasite? Bacteria? A virus? An intestinal worm? An idea.
            Resilient... highly contagious. Once an idea has taken hold of the brain it's almost
            impossible to eradicate. An idea that is fully formed - fully understood - that sticks;
            right in there somewhere.</p>
        <p>What is the most resilient parasite? Bacteria? A virus? An intestinal worm? An idea.
            Resilient... highly contagious. Once an idea has taken hold of the brain it's almost
            impossible to eradicate. An idea that is fully formed - fully understood - that sticks;
            right in there somewhere.</p>
        <p>What is the most resilient parasite? Bacteria? A virus? An intestinal worm? An idea.
            Resilient... highly contagious. Once an idea has taken hold of the brain it's almost
            impossible to eradicate. An idea that is fully formed - fully understood - that sticks;
            right in there somewhere.</p>
    </div>
</div>

Bild oben nicht umflossen

Beispiel

So, once we've made the plant, how do we go out? Hope you have something more elegant in mind than shooting me in the head? A kick. What's a kick? This, Ariadne, would be a kick.

Bild vergrößern

Quelltext

Quelltext kopieren

<div class="media-object bb-media-object">
    <div class="media-object-section bb-text-justify">
        <p>So, once we've made the plant, how do we go out? Hope you have something more elegant in mind
            than shooting me in the head? A kick. What's a kick? This, Ariadne, would be a kick.</p>
        <p>What is the most resilient parasite? Bacteria? A virus? An intestinal worm? An idea.
            Resilient... highly contagious. Once an idea has taken hold of the brain it's almost
            impossible to eradicate. An idea that is fully formed - fully understood - that sticks;
            right in there somewhere.</p>
        <p>What is the most resilient parasite? Bacteria? A virus? An intestinal worm? An idea.
            Resilient... highly contagious. Once an idea has taken hold of the brain it's almost
            impossible to eradicate. An idea that is fully formed - fully understood - that sticks;
            right in there somewhere.</p>
        <p>What is the most resilient parasite? Bacteria? A virus? An intestinal worm? An idea.
            Resilient... highly contagious. Once an idea has taken hold of the brain it's almost
            impossible to eradicate. An idea that is fully formed - fully understood - that sticks;
            right in there somewhere.</p>
        <p>What is the most resilient parasite? Bacteria? A virus? An intestinal worm? An idea.
            Resilient... highly contagious. Once an idea has taken hold of the brain it's almost
            impossible to eradicate. An idea that is fully formed - fully understood - that sticks;
            right in there somewhere.</p>
    </div>
    <div class="media-object-section top" style="width: 50%">
        <div class="thumbnail bb-thumbnail">
            <a href="#" title="Bild vergrößern"
               data-featherlight="bild_groß.jpg"><img
                        alt="Alternativer Bild-Text"
                        title="Titel zum Bild"
                        class="bb-image" style="width: 100%"
                        src="bild_kleiner.jpg"> <i class="bb-image-caption">
                    Bild vergrößern
                    <i title="Bild vergrößern" class="bb-icon-text fa fa-search fa-lg"></i>
                </i>
            </a>
        </div>
    </div>
</div>

Benötigtes Javascript

<script type="text/javascript" src="style.brandenburg.de/2_4/js/vendors/2jquery.min.js"></script>
 <script type="text/javascript" src="style.brandenburg.de/2_4/js/vendors/3jquery.mobile-events.min.js"></script>
 <script type="text/javascript" src="style.brandenburg.de/2_4/js/vendors/6featherlight.js"></script>
 <script type="text/javascript" src="style.brandenburg.de/2_4/js/vendors/7featherlight.gallery.js"></script>
 <script type="text/javascript" src="style.brandenburg.de/2_4/js/vendors/what-input.min.js"></script>
 <script type="text/javascript" src="style.brandenburg.de/2_4/js/vendors/5foundation.min.js"></script>
 <script type="text/javascript" src="style.brandenburg.de/2_4/js/finalApp.js"></script>

Aufbau

Jedes Bild, zu welchem Publizierende keine eigenen Publizierrechte besitzen, erhält eine Kennzeichnung gemäß den Vorschriften im Kapitel 2.3 Urheberkennzeichnung.
Bilder können in den Bildformaten (Breite zu Höhe) 16:9, 4:3, 3:4, 3:1, 2:1 und 1:1 angezeigt werden.
Die Positionierung im Text kann linksbündig, rechtsbündig, zentriert oder textumflossen sein.
Bei zentrierten Bildern beginnt der Text erst nach dem Bild.
Bei textumflossenen Bildern muss der Schutzabstand eingehalten werden.
Bildunterschriften werden rechts unterhalb des Bildes als Fußnote integriert.
Bilder können einen Rahmen (1px) zur Abgrenzung in HELLGRAU erhalten.

Spezifische Anforderungen

Die Einbindung erfolgt mit HTML5.
Besitzt das Bild eine Fläche für die Urheberkennzeichnung, so ist diese vorzugsweise in der blassen Grundfarbe einzufärben. Transparenz ist zulässig. Nur wenn der Kontrast und die Lesbarkeit des Schriftzugs darunter leiden würden, kann eine alternative Farbe verwendet werden.

Barrierefreiheit

Bilder sind grundsätzlich barrierefrei anzubieten.

Aktionsverhalten

Standardaktionen wie z.B. „Download“ und “Speichern unter“ werden ermöglicht.
Funktionen zur Bildvergrößerung werden rechts unterhalb des Bildes in eine Fußnote integriert.

Responsive Design

Auf kleiner werdenden Viewports erfolgt eine Skalierung auf die volle Breite in dem zur Verfügung stehenden Anzeigebereich.

Seite drucken

5. Komponenten

Platzierung

5.2 Bilder

Bild zentriert

Beispiel

Quelltext

Bild links umflossen

Beispiel

Quelltext

Bild rechts umflossen

Beispiel

Quelltext

Bild oben-links umflossen

Beispiel

Quelltext

Bild oben-rechts umflossen

Beispiel

Quelltext

Bild unten nicht umflossen

Beispiel

Quelltext

Bild mittig nicht umflossen

Beispiel

Quelltext

Bild oben nicht umflossen

Beispiel

Quelltext

Benötigtes Javascript

Aufbau

Spezifische Anforderungen

Barrierefreiheit

Aktionsverhalten

Responsive Design

Service

Schnellzugriff

Service