img & iframes

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.

iframe Breite in Prozent

Bilder oder iframes zentrieren

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 & responsive Design

Bildgröße in Prozent

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;}

Bildbereiche abschneiden

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.

so sieht`s aus

weiteres Layoutbeispiel unter Layout

beispiel

Hintergrundbilder

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.

mehr dazu: Hintergrundbild

Runde Bilder

Man kann Bilder mit border-radius: 50% eliptisch oder kreisrund darstellen.
so sieht`s aus
mehr dazu: border-radius

Rand & Passepartout

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;
 }

Schatten & Passepartout

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

Halbtransparent

Die CSS Eigenschaft opacity ermöglicht eine Transparenz einzustellen.
so sieht`s aus
mehr dazu: Farben / opacity

Bild als Rahmen

Mittels CSS border-image kann man ein Bild als Rahmen verwenden.
mehr dazu: border-image

Bilder per CSS einbinden

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

Text um Bild fließen lassen

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

Unerklärlicher Rand unter dem Bild

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

Bilder mit Infobox

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.

Siehe Beispiel

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.

Ich zeige hier einige Beispiele, die ich mit Fotorama erstellt habe. Siehe dazu den Quelltext der Beispiele.

 

Iframe height: auto?

Iframes sind wie Bilder 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 ist nicht möglich.

Youtube Video 100% Breite zum Bildschirm / Höhe ermitteln

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;}

Youtube-Video / Iframe 100% Breite zum Elternelement / Höhe ermitteln

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.

CSS

    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;
}
    

HTML

<main>
<div id="iframe-container">
<iframe src="https://www.youtube.com/embed/nGeKSiC....."></iframe>
</div>
</main>