HTML/Tutorials/Bilder im Internet/Bilder mit CSS formatieren
Text-Info
- 30min
- einfach
- Kenntnisse in
● HTML
● CSS
In diesem Kapitel lernen Sie, wie Sie Bilder und Bildunterschriften mit CSS gestalten können.
Bilder in Webseiten sind insofern ein Sonderfall, da das img-Element ein so genanntes ersetztes Element ist. Es ist eigentlich nur ein inhaltsleerer Container für das von anderer Stelle geladene Bild. Deshalb beschränkt sich die Gestaltung durch CSS im Wesentlichen nur auf die Abmessungen und Abstände des Bildes.
Erst in letzter Zeit gibt es mit CSS-Filter und mix-blend-mode die Möglichkeit, auch das Aussehen der Bilder selbst zu verändern.
Inhaltsverzeichnis
flexible Breiten im responsiven Webdesign[Bearbeiten]
Noch vor wenigen Jahren sollten img-Elemente Breiten- und Höhenangaben in Form von HTML-Attributen erhalten, damit die Browser den Platz für das dann zu ladende Bild freihalten konnten. Was in Zeiten von pixelgenauen Layouts sinnvoll schien, ist heute überholt. Im responsiven Webdesign sollen Bilder (und der Rest der Webseite) auf jedem Bildschirm gut aussehen. Da die Gesamtbreite des verfügbaren Viewports nicht bekannt ist, kann man auch keine feste Breite vergeben. So würde ein 200px breites Bild auf einem Handy mit 20em breiten Viewport nur ca. 6em (≙≈ 100px) für den umfließenden Text lassen.
Deshalb ist es sinnvoll, Bildern zuerst die volle Breite und erst bei größeren Viewports einen festen oder relativen Wert zuzuweisen:
img {
width: 100%;
}
@media (min-width: 25em) {
img {
width: 50%;
float: right;
margin: 0 0 1em 1em;
}
}
@media (min-width: 50em) {
img {
width: 25%;
}
}
Das Bild erhält auf kleinen Bildschirmen die volle Breite.
Eine Medienabfrage an den Browser lässt das Bild bei einer Viewport-Breite von mehr als 25em auf die halbe Breite schrumpfen und mit float an die rechte Seite floaten (englisch für schweben, hängen). Passend dazu erhält es mit margin einen unteren und linken Abstand zum umfließenden Text.
Es ist ebenso möglich, eine Maximalbreite anzugeben:
img {
width: 100%;
max-width: 500px;
height: auto;
}
Bildunterschriften[Bearbeiten]
Um Bildern eine passende Erklärung oder Bildunterschrift zu geben ist das figcaption-Element in Verbindung mit dem figure-Container ideal. Es ist vor allem aus Gründen der Semantik den leider immer noch häufig anzutreffenden Lösungen mit verschachtelten div-Elementen vorzuziehen.
<figure>
<img src="lauf-1.jpg" alt="Lauf an der Pegnitz - Nürnberger Tor">
<figcaption>Lauf an der Pegnitz - Nürnberger Tor</figcaption>
</figure>
Als Container für das img-Element und die figcaption dient ein figure-Element.
Nur mit dem default-CSS der Browser sieht das Ergebnis zunächst einmal wenig ansprechend aus. Deshalb setzen wir unsere Vorstellungen mit ein wenig CSS um:
figure {
position: relative;
margin: 0;
padding: .5em;
width: 100%;
border: thin solid gainsboro;
background: white;
width: 100%;
}
@media (min-width: 25em) {
figure {
width: 20em;
float: right;
}
}
figcaption {
padding: .8em;
text-align: center;
}
Hier werden einige Einstellungen festgelegt, die erst später wichtig werden:
- Außen- (margin) bzw. Innenabstände (padding) festlegen,
- die Bildunterschrift mit text-align zentrieren,
Der Normalfall: mehrere Bilder nebeneinander[Bearbeiten]
Während in Fließtexten oft ein einzelnes Bild integriert ist, will man häufig mehrere Bilder nebeneinander präsentieren. Das figure-Element kann auch verschachtelt werden:
<figure id="gallery">
<figcaption>Ansichten von Lauf an der Pegnitz</figcaption>
<figure>
<img src="//wiki.selfhtml.org/images/a/a6/Lauf-1.jpg" alt="Lauf an der Pegnitz - Nürnberger Tor">
<figcaption>Nürnberger Tor</figcaption>
</figure>
<figure>
<img src="//wiki.selfhtml.org/images/4/4a/Lauf-2.jpg" alt="Lauf an der Pegnitz - Pegnitz">
<figcaption>Brücke über die Pegnitz</figcaption>
</figure>
<figure>
<img src="//wiki.selfhtml.org/images/2/24/Lauf-3.jpg" alt="Lauf an der Pegnitz - Nürnberger Tor">
<figcaption>Mauermühle und Judenturm</figcaption>
</figure></figure>
Um die einzelnen Bilder nebeneinander zu positionieren, gibt es mehrere Möglichkeiten in CSS:
- Die figure-Elemente sind Block-Elemente, die mit
display: inline-block;nebeneinander positioniert werden können
→ dafür müssen sie dann passende Breiten und Abstände erhalten. - ein ähnlicher Effekt ist mit flexbox möglich. Hier kann man mit justify-content noch bestimmen, wie ein einzelnes Kindelement in der letzten Zeile positioniert wird.
- mit Grid Layout wird das Elternelement zum Grid Container. Es kann eine feste Spaltenanzahl festgelegt werden, es ist aber auch möglich Raster implizit zu erzeugen, die durch den auto-placement-Algorithmus Rasterelemente automatisch auf den verfügbaren Platz verteilen.
#gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
gap: 1em;
}
#gallery > figcaption {
grid-column: 1 / -1;
}
Um im CSS ein figure figure zu vermeiden, geben wir der Bildergalerie eine ID mit Namen gallery.
Folgende Einstellungen sind wichtig:
-
display: grid: erzeugt das Raster -
grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));: erzeugt Rasterlemente, die zwischen 15em und einem Bruchteil des verfügbaren Platzes breit sind. -
gap: 1em;: erzeugt einen Abstand zwischen den Rasterelementen, aber nicht außen.
Einziges Problem ist die figcaption der gesamten Galerie. Ohne weitere Festlegungen würde sie das erste Rasterlement links neben dem ersten Bild einnehmen. Mit …
-
grid-column: 1 / -1;erstreckt es sich aber über die gesamte Breite von der ersten bis zur letzten (-1 = von rechts gezählt) Rasterlinie
Einschwebende Bildunterschriften[Bearbeiten]
Normalerweise ist figcaption unterhalb des img im figure-Elternelement positioniert. Wir wollen es jetzt über den unteren Bildrand positionieren. Damit das Bild noch erkennbar bleibt, soll die Bildunterschrift einen durchscheinenden Hintergrund bekommen:
#gallery figure {
position: relative;
}
figure img {
width: 100%;
display: block;
}
#gallery > figure > figcaption {
position: absolute;
bottom: 0;
width: 100%;
line-height: 3em;
color: white;
background: rgba(0,0,0,.3);
}
Zuerst müssen wir
a #gallery figure relativ und
b #gallery > figure > figcaption absolut positionieren.
Danach wird figcaption mit bottom: 0; unten platziert.
bottom: 0; auch wirklich mit dem figure, bzw. img-Element unten bündig abschließt, muss ebenfalls img {display: block;} festgelegt werden.Folgende Einstellungen sind noch wichtig:
-
width: 100%;: sorgt dafür, dass die Bildunterschrift über die gesamte Breite geht. -
color: white;: der Text wird weiß, -
background: black;: der Hintergrund ist als schwarzer, bzw. grauer Balken sichtbar. -
opacity: 0.3;: Der Hintergrund wird durchscheinend. Dies gilt aber auch für den Text, sodass ein zu niedriger Wert < 0.3 fast nicht lesbar ist.
Der Hover-Effekt[Bearbeiten]
Trotz durchscheinendem Hintergrund liegt nun ein Balken über unserem Bild. Wir können diesen im Normalfall verschwinden lassen und erst bei :hover einschweben lassen:
#gallery > figure > figcaption {
opacity: 0;
bottom: -3em;
transition: all 1s ease;
}
#gallery > figure:hover > figcaption {
opacity: 1;
bottom: 0;
}
Im mittleren Bild wird die Bildunterschrift im Normalzustand durch bottom: -3em; unterhalb des Rands positioniert. opacity: 0 verhindert, dass die Bildunterschrift sichtbar ist.
Erst bei :hover wird die Bildunterschrift mit opacity: 1; sichtbar und durch bottom: 0; an den unteren Rand geschoben.
Das overflow: hidden; des figure-Element verhindert, dass die Bildunterschrift schon außerhalb des Bildes zu sehen ist.
#gallery > figure.mitte > figcaption {
width: 0;
left: 50%;
}
#gallery > figure.rechts > figcaption {
width: 0;
bottom: 50%;
left: 50%;
overflow: hidden;
}
Die mittlere Bildunterschrift hat zusätzlich eine Breite von 0. Bei :hover dehnt sich die Bildunterschrift aus der Mitte heraus in ihre Originalposition.
Die rechte Bildunterschrift entspringt in der Mitte des Bildes und schiebt sich dann nach unten.
Wo kommt das Fragezeichen her?[Bearbeiten]
Damit man überhaupt weiß, dass es eine (im Normalfall ja nicht sichtbare) Bildunterschrift gibt, wird mittels Pseudoelement ::before ein Fragezeichen im linken unteren Bildrand platziert.
#gallery figure::before {
content: "?";
position: absolute;
bottom: 1em;
left: 1em;
background: white;
color: black;
opacity: .7;
width: 1.5em;
height: 1.5em;
border-radius: 1em;
text-align: center;
font-size: 1.5em;
line-height: 1.5em;
transition: all 1s ease;
}
#gallery figure:hover:before {
opacity: 0;
}
Sobald der Benutzer mit der Maus über das Bild fährt, verschwindet es wieder. Damit dieser Wechsel nicht zu abrupt erscheint, legen wir mit transition weiche Übergänge fest.
Bildeffekte mit Filtern und Rahmen[Bearbeiten]
Dieses Beispiel soll nur aufzeigen, dass die border-Eigenschaft mehr als nur eine einfache Randlinie erzeugen kann.
Mit der CSS-Filter-Eigenschaft können Sie Bilder verfremden. Dies mag in Einzelfällen interessant sein; generell ist hier aber auch weniger oft mehr.
#blackwhite {
filter: grayscale(1);
border: solid 2vmin #eee;
border-bottom-color: #fff;
border-left-color: #eee;
border-radius: .2em;
border-right-color: #eee;
border-top-color: #ddd;
box-shadow: 0 0 .4em 0 rgba(0,0,0,.25) inset, 0 .4em .8em .4em rgba(0,0,0,.25);
padding: 3vmin;
position: relative;
}
#blackwhite::before {
border-radius: .2em;
bottom: -2vmin;
box-shadow: 0 .2em .4em 0 rgba(0,0,0,.25) inset;
content: "";
left: -2vmin;
position: absolute;
right: -2vmin;
top: -2vmin;
}
#blackwhite::after {
border-radius: .2em;
bottom: -2.5vmin;
box-shadow: 0 .2em .4em 0 rgba(0,0,0,.25);
content: "";
left: -2.5vmin;
position: absolute;
right: -2.5vmin;
top: -2.5vmin;
}
#two {
border: 1em groove gold;
}
#three {
border: 1em double black;
filter: url('#KantenErkennung');
}
Im letzten Bild mit der id #three wird ein SVG-Filter eingebunden, der im HTML-Dokument in einem SVG-Abschnitt notiert ist.
Schmuckrahmen[Bearbeiten]
Mit der border-image-Eigenschaft können Sie Bildern (und Blockelementen) einen Rahmen geben, der anstelle einer Randlinie eine externe Grafik verwendet.
Da das Zuschneiden nicht trivial ist, habe ich den Border-image Generator der MDN verwendet.
Als Gafik habe ich eine SVG-Grafik aus Wikimedia Commons verwendet:
img {
border: 5em solid; /* muss notiert werden, um border-image darzustellen! */
}
.schmuckrahmen {
border-image-slice: 60 60 60 60;
border-image-width: 5em;
border-image-outset: 0px 0px 0px 0px;
border-image-repeat: stretch repeat;
border-image-source: url("https://upload.wikimedia.org/wikipedia/commons/0/04/Frame.svg");
}
linear-Gradient als Hintergrundbild[Bearbeiten]
Sie können einen Rahmen auch mit einem Farbverlauf einfärben.
.rahmen_mit_verlauf {
border-top: 2em solid #dfac20;;
border-bottom: 2em solid #c32e04;
background-position: 0 0, 100% 0;
background-repeat: no-repeat;
background-size: 2em 100%;
background-image: linear-gradient(to bottom, #dfac20 0%, #c32e04 100%),
linear-gradient(to bottom, #dfac20 0%, #c32e04 100%);
}
Größenanpassung mit object-fit[Bearbeiten]
Mit object-fit und object-position kann man das Bild innerhalb des durch das img-Element gebildeten Containers positionieren.
Kreisrunder Ausschnitt eines rechteckigen Bildes[Bearbeiten]
Wenn man ein rechteckiges Bild kreisrund darstellen möchte, kann man mit border-radius: 50% die Ecken abrunden. Allerdings verzerrt sich das Bild, wenn man Höhe und Breite auf den gleichen Wert setzt. Anstelle des Einsatz eines Container-Elements ist dies mit object-fit und object-position viel einfacher:
.rund {
object-fit: cover;
object-position: 50% 0;
border-radius: 50%;
width: 15em;
height: 15em;
}
.vergleich {
object-fit: cover;
object-position: 50% 100%;
border-radius: 50%;
width: 15em;
height: 15em;
}
object-position im ersten Beispiel .rund so nach oben verschoben, dass das Gesicht im Mittelpunkt ist. Im zweiten Beispiel .vergleich richtet sich das Bild am unteren Ende aus.Panorama mit Image-Slider[Bearbeiten]
Dieses Beispiel beruht auf einem Missverständnis im Form. Der Threadersteller wollte eigentlich ein Bilderkarussell - ein slider ist ein Schieberegler type = "range". Er eignet sich dafür, Panoramabilder, die aufgrund ihrer Breite nur in geringer Höhe dargestellt werden können, so zu formatieren, dass jeweils ein Ausschnitt größer dargestellt wird:
figure img, figcaption, input {
width: 335px;
max-width: 100%;
margin-bottom: 0.4em;
}
figure img {
height: 335px;
object-fit: cover;
object-position: calc(var(--percentage, 0) * 1%) center;
}
Das Bild innerhalb des Figure-Containers (figure img) wird 335px breit und hoch, obwohl das Panorama viel breiter ist. Mit object-fit:cover füllt es nun den gesamten Platz, deshalb stehen die Seiten außerhalb des verfügbaren Platzes. Mit dem Slider wird bei einer Eingabe über eine CSS-Variable der Wert für object-position verändert und das Bild entsprechend verschoben.
border-top) und unten (border-bottom) in jeweils einer Farbe festgelegt. Anstelle eines rechten und linken Rahmens wird mitbackground-imageein Hintergrundbild mit einem Farbverlauf verwendet, dass dann mitbackground-sizepassend skaliert wird.