Sie sind hier: Start Komponenten
Theme "Stahlblau-345498" erfolgreich aktiviert
Um das Theme zu aktivieren, muss folgende CSS-Datei eingebunden werden:


<!-- CSS link (HTML header), replace with "https://style.brandenburg.de/%VERSION_ALIAS%/css/app.css" -->

<link type="text/css" rel="stylesheet" href="https://style.brandenburg.de/%VERSION_ALIAS%/css/themes/Stahlblau-345498.css"/>
                

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

    Beispiel

    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.


    <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. Neue Funkstreifenwagen für die Polizei 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

    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 Blick von einer Brücke auf eine Autobahnbaustelle 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.


    <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
    Blick von einer Brücke auf eine Autobahnbaustelle 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.


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


    <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

    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.

    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.

    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.

    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

    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.

    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.

    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.

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

    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.

    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.

    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.

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