5.2 Bilder

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

Bild zentriert

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum.

Bild zentriert Quelltext

<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.

<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

<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.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

<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>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.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

<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>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.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

Blick von einer Brücke auf eine Autobahnbaustelle

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.

<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.

<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

<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.

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 Anforderung

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.

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.

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.

Responsives Design

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

Seite drucken

5.2 Bilder

Bild zentriert

Bild zentriert Quelltext

Bild links umflossen

Beispiel

Bild rechts umflossen

Beispiel

Bild oben-links umflossen

Bild oben-rechts umflossen

Bild unten nicht umflossen

Beispiel

Bild mittig nicht umflossen

Beispiel

Bild oben nicht umflossen

Beispiel

Benötigtes Javascript

Aufbau

Spezifische Anforderung

Barrierefreiheit

Aktionsverhalten

Responsives Design

Landesportale

Info-Links

Service

Schnellzugriff

Service-Links

Landesportale