Die HTML Elemente img und iframe sind ein Inline-Block Elemente. Das bedeutet, sie erzeugen keine neue Zeile, man kann ihnen jedoch eine Breite und Höhe zuweisen.
Wenn man Bilder zentrieren möchte muss man dem Elternelement text-align: center zuweisen.
Wenn Bilder erklärende Abbildungen zum Text sind sollten sie in ein figure Element eingefügt werden.
so sieht`s aus
HTML
<figure>
<img src="denker.jpg" alt="Denker">
</figure>
CSS
figure{text-align: center;}
Bilder werden mit dem img Element eingebunden oder man nutzt das picture Element. Mit den HTML Attributen width und height kann man die Größe des Bildes angeben. Durch die Vielzahl unterschiedlicher Viewport Größen, ist es ratsam die Bildbreite mittels CSS in Prozent anzugeben. Durch height: auto wird die Höhe entsprechend angepasst.
img{width: 100%; height: auto;}
Eine alternative Möglichkeit ist max-width. Bei anderen Elementen als dem img Element bedeutet max-width, dass das Element nicht größer als angegeben dargestellt wird. Weist man einem img Element max-width: 100% zu bedeutet es, dass das Bild nicht größer als seine reale Pixelgröße dargestellt wird.
so sieht`s aus
img{max-width: 100%; height: auto;}
Eine andere Möglichkeit, die sich bei Stimmungsbildern, wie Wolken, Landschaften oder Mustern einsetzen lässt besteht darin Bereiche abzuschneiden. Dazu fügt man das Bild in einen Container ein, welcher mit overflow: hidden ausgezeichnet ist.
weiteres Layoutbeispiel unter Layout
Bilder können als Hintergrundbilder gekachelt werden. Man kann auch mehrere Hintergrundbilder einfügen, die Kachelung auf x oder y Achse beschränken oder ganz aufheben, die Position und Größe bestimmen und vieles mehr.
Mittels der CSS Eigenschaft object-fit lassen sich Bilder in einem Container ähnlich anzeigen, wie es mit Hintergrundbildern möglich ist.
Man hat die Möglichkeit dass bei einem ungleichen Seitenverhältnis des Containers und des Bildes zu bestimmen, welcher Ausschnitt des Bildes angezeigt wird und welcher abgeschnitten wird.
| Eigenschaft | Wert | Bedeutung |
|---|---|---|
| object-fit | fill | Dies ist die Standardeinstellung. Das Bild wird so skaliert, dass es die angegebene Dimension ausfüllt. Bei Bedarf wird das Bild gestreckt oder gestaucht, um es einzupassen |
| contain | Das Bild behält sein Seitenverhältnis bei, wird jedoch an die angegebene Größe angepasst | |
| cover | Das Bild behält sein Seitenverhältnis bei und füllt die angegebene Dimension aus. Das Bild wird passend zugeschnitten | |
| none | Das Bild wird nicht verkleinert. Wenn der Container kleiner ist, wird nur ein Ausschnitt des Bildes angezeigt. | |
| scale-down | Das Bild wird herunterskaliert auf die kleinste Version von none oder contain |
|
| Standardwert | fill | |
| Vererbbar | nein | |
| Anwendbar | img, video | |
Man kann Bilder mit border-radius: 50% eliptisch oder kreisrund darstellen.
so sieht`s aus
mehr dazu: border-radius
Mittels CSS Eigenschaft border kann man einen Rand um ein Bild legen.
Mittels der CSS Eigenschaft padding und der CSS Eigenschaft background-color kann man ein Passepartout um ein Bild legen.
so sieht`s aus
img{
padding: 20px;
background-color: #fab;
border: 3px solid #a00;
}
Mittels box-shadow kann man einen Außenschatten oder Innenschatten um ein Bild legen.
mehr dazu: Farben / Boxshadow
Auch mehrere Schatteneffekte sind möglich. Dadurch lässt sich auch ein Passepartout Effekt erzeugen.
so sieht`s aus
Die CSS Eigenschaft opacity ermöglicht eine Transparenz einzustellen.
so sieht`s aus
mehr dazu: Farben / opacity
Mittels CSS border-image kann man ein Bild als Rahmen verwenden.
mehr dazu: border-image
Mit den CSS Selektoren :before und :after lassen sich Bilder per CSS vor oder nach einem Element einfügen.
mehr dazu: Selektoren Pseudoelemente before / after
Mit der CSS Eigenschaft float kann man Text rechts oder links um ein Bild fließen lassen.
so sieht`s aus
Mittels clear:both kann man das Floaten ab einer bestimmten Position beenden.
siehe dazu dieses Beispiel
mehr dazu: float
Bilder in einem Blockelement können einen kleinen Abstand am unteren Rand erzeugen. Das liegt daran, dass Bilder Inline-Block Elemente sind, welche eine line-height haben.
Diesen Rand kann man entfernen, indem man dem umgebenden Blockelement eine line-height: 0 zuweist.
Eine andere Möglichkeit wäre das Bild in ein Blockelement zu verwandeln. img{display: block;} mit den dazugehörigen Konsequenzen (es fängt eine neue Zeile an, man muss es mittels margin zentrieren).
Bild mit Rand / Bild ohne Rand
Bei Berührung eines Bildes soll ein Infotext erscheinen. Das lässt sich mit CSS realisieren. Man erstellt ein Elternelement, in dem ein Bild und ein Blockelement mit der Info liegt. Das Info- Element wird mittels position: absolute am Elternelement ausgerichtet und zwar unterhalb des Elternelements. Durch overflow: hidden des Elternelements ist das Info Element erstmal nicht mehr zu sehen. Bei Berührung des Elternelements mittels Pseudoklasse :hover positioniert man das Info Element neu, so dass Unterkante auf Unterkante liegt. Fügt man nun noch ein Transition hinzu, wird es mittels einer Animation eingeblendet.
Um eine Bildergallery zu erstellen, sind Programmierkenntnisse erforderlich. Einfacher ist es auf fertige Javascript Frameworks zuzugreifen, beispielsweise auf die Fotorama Bildergallery.
Diese ist sehr benutzerfreundlich, bietet viele Möglichkeiten und hat eine ausführliche Dokumentation in leicht verständlichem Englisch.
Hier einige Beispiele von mir.
Iframes sind Inline-Block Elemente. Will man einen Iframe eine prozentualer Breite zum Elternelement zuweisen und möchte das Seitenverhältnis beibehalten, muss man irgendwie die Höhe ermitteln. Eine automatische Höhenanpassung wie bei Bildern height:auto
Das Seitenverhältnis des Videos ist 560 x 315
315/560 =
0,562;
0,562 * 100 = 56;
Die Höhe ist 56% zur Breite, der Wert vw ist die Bildschirmbreite
width und height Attribute müssen aus html entfernt werden
width="560" height="315"
body{margin: 0;}
iframe{
display: block;
width: 100vw; height: 56vw;}
Für das folgende Beispiel muss man das prozentuale Höhe zur Breite des Videos ausrechnen. Zum Beispiel, wenn das Seitenverhältnis des Videos 560 x 315 ist
315/560 =
0,562;
0,562 * 100 = 56,2;
Die Höhe ist ungefähr 56% zur Breite
width und height Attribute müssen aus html entfernt werden
width="560" height="315"
Diese porzentuale Höhe wird dem padding-bottom des #iframe-container Elements zugewiesen. Man beachte die Verschachtelung in 3 Stufen: main, #iframe-container, iframe
main{
max-width: 800px;
margin: auto;
border: 1px solid #000;
}
#iframe-container {
margin: auto;
position: relative;
padding-bottom: 56%;
overflow: hidden;
}
#iframe-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
}
<main>
<div id="iframe-container">
<iframe src="https://www.youtube.com/embed/nGeKSiC....."></iframe>
</div>
</main>