Layout - Bilder

Wie man es nicht machen sollte:

Vorstehend ein Originalbild mit der Dimension 6000px x 4000px und einer Grösse von 21,40 MB.

Das Bild kann nicht korrekt dargestellt werden weil es für meinen/Ihren Browser zu gross ist :-)
Ich habe hier zu Hause eine Bildschirmbreite von 1920px und bräuchte 3 Bildschirme um das Bild in der Breite vollständig zu betrachten.

HTML:
<img style="position: relative;" src="../../images/landschaft-kueste01-6000x4000.jpeg" width="6000" height="4000" alt="Lanschaft mit Küste">

Wie man es auch nicht machen sollte:

Ich gebe dem Bild im Html-Code einfach eine kleinere Breite/Höhe, z.B. width="1200" height="833"

Das sieht schonmal besser aus :-) ...... ist aber immer noch 21.40 MB fett!

Wie es funktionieren kann:

Ich wandle das Bild mit z.B. "Irfanview" (unter Ubuntu 20.04) auf 1250px Breite um. Die Höhe wird automatisch mit angepasst (833px).

Das neue Bild hat jetzt: 1200px x 833px bei 147,41 KB.

147.41 KB versus 21,40 MB = Das ist 145 mal weniger! Sieht man den Unterschied?

Backgroundpattern als Hintergrund, einzel- u. mit Wiederholungen:

Das benutzte Bild ist 40px x 40px.

Beispiel:
body oder .eltern-element{
    background-color: #FF9900; /* gilt nur für vollflächige Bilder und falls Bild nicht geladen wird */
    background-image: url("animalcookie-40px.png");
    background-repeat: repeat-x;
    background-position: left bottom;
    background-attachment: fixed;
}
Kurzschreibweise:
#eltern-element {
background: #FF9900 url("animalcookie-40px.png") repeat-x left bottom fixed;
}

body {
    background-color: #FF9900; /* Falls das Bild nicht geladen wird */
    background-image: url("animalcookie-40px.png");
    background-repeat: no-repeat;
}

body {
    background-color: #FF9900;
    background-image: url("animalcookie-40px.png");
    background-repeat: repeat-y;
}

body {
    background-color: #FF9900;
    background-image: url("animalcookie-40px.png");
    background-repeat: repeat-x;
}

body {
    background-color: #FF9900;
    background-image: url("animalcookie-40px.png");
    background-repeat: repeat-x center;
}

body {
    background-color: #FF9900;
    background-image: url("landschaft-kueste01-1500x1000.jpg");
    background-repeat: no-repeat center fixed;
}

body {
    background-color: #FF9900;
    background-image: url("animalcookie-40px.png");
}

elternelement {
    width: 100%;
    height: 800px;

    background-color: #FF9900;
    background-image: url("landschaft-kueste01-1500x1000.jpg") no-repeat center center;
}

Responsive Images mit Text:

Dieses Beispiel kann in unterschiedlichen Situationen angewendet werden und ist in vielfältiger Weise anpassbar.
Hier ist ein "Platzhalterbild" mit 1920 x 1277px in ein figure - Element eingebaut. Natürlich sollte nur eine ausreichende Bildgrösse verwendet werden.

Die Gesamtgrösse kann im Elternelement über width eingestellt werden. Die Schriftgrössen müssen dann auch angepasst werden.

Html:
<figure class="bild-in-figure-mit-figcaption">
    <img src="../../images/unsplash/flaschenregal-1920x1277.jpg" width="1920" height="1277" alt="Regal mit Spirituosen">
    <figcaption>                  /* figcaption bei Bedarf löschen */
        Flaschensammlung          /* figcaption bei Bedarf löschen */
    </figcaption>                 /* figcaption bei Bedarf löschen */
    <div class="text-inhalt">     /* gesamte Textbox bei Bedarf löschen */
        <p>Titeltext</p>          /* Titel bei Bedarf löschen */
        <p>Hier ist noch Platz für jede Menge Text </p> /* Text bei Bedarf löschen */
    </div>                        /* gesamte Textbox bei Bedarf löschen */
</figure>


CSS:
.bild-in-figure-mit-figcaption {
    position: relative;
    display: block;
    width: 100%;    /* hier Gesamtgrösse einstellen */
    height: auto;
    padding: 15px;
    border: 1px solid #000;   
    border-radius: 5px;
    background-color: rgb(232, 211, 141);
    box-shadow: 3px 3px 5px #b1b1b1;
}

Bitte testweise die Bildschirmbreite verändern:

Titeltext

Hier ist noch Platz für jede Menge Text

Text links und Bild rechts:

Im HTML-Flow zuerst den Textinhalt dann das Bild.
Springt bei Platzmangel ~800px von oben nach unten und skaliert schön.

Titeltext

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Weiterlesen...

Bild links und Text rechts: Einfach Html-Flow umkehren

Dazu das Bild und den Textinhalt im HTML-Flow umkehren.
Springt bei Platzmangel ~800px von oben nach unten und skaliert schön.

Titeltext

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Weiterlesen...

Bilder unterschiedlicher Höhe:

(Original)

mit aspect-ratio: 3/2; und object-fit: contain;

Bild mit Text: "float: left, img: shape-outside: circle(100px);"

Blafasel

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Bild mit Text: "float: right, img: shape-outside: circle(100px);"

Blafasel

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Beispiel: Responsive Gallery

Nationalflaggen: mit leerem Div und Gradienten hergestellt:

Beispiel class: header-aspect-ratio: Header, Bild mit Text

Skaliert bis auf 500px herunter, danach padding/margin und Schriftgrösse anpassen.

h2 Titel klickbar

h3 Text

Hier noch ein paar Zeilen...

Bild "transform: rotate(9deg);":

Hover me...

Zappelbuch:

box-shadow:

Html:
<div class="box-shadow-01">

CSS:
.box-shadow-01 {
    position: relative;
    max-width: 600px;
    height: 300px;
    padding: 20px;
    margin: 0 auto;
    box-shadow: 3px     3px         10px            8px       rgba(0, 0, 0, 0.4);
            horizontal  vertikal    Blur-radius     Spread    Color;
}

Ein paar Spielereien:

Bilder mit Overlay:

• 

  Image Titel

Overlay mit Zoom:

Product title

$100

Gallerie Slider mit Thumbnails (reparieren):

Bilderquellen und Lizenznachweise:

• Photo by CHUTTERSNAP on Unsplash
• Photo by Lance Reis on Unsplash
• Photo by Alex Glebov on Unsplash
• Photo by Jayson Hinrichsen on Unsplash
• Photo by Stephen Leonardi on Unsplash