rund oder eckig …
Ein Bild einzufügen ist mit der entsprechenden HTML-Anweisung schnell erledigt. Dann reichen wenige zentrale CSS-Angaben, um Text- oder Bildelemente zum Beispiel:
- mit einer Rundung zu versehen,
- einen Rahmen hinzuzufügen oder
- einen Schattenwurf zu realisieren.
Selbstverständlich sind auch Kombinationen möglich.
| HTML-Code:
| Ergebnis:
|
<img src="foto.jpg" alt="Bezeichnung">
| 
|
<img src="foto.jpg" alt="Bezeichnung" style="border-radius:1em;">
|
|
<img src="foto.jpg" alt="Bezeichnung" style="border:1px solid #666; padding:0.2em;">
|
|
<img src="foto.jpg" alt="Bezeichnung" style="box-shadow:0.3em 0.3em 0.6em #666;">
|
|
im Hintergrund …
Bilder im Hintergrund von Webseiten oder grafischen Bereichen können so formatiert werden, dass sie den zur Verfügung stehenden Platz unterschiedlich ausfüllen.
Im folgenden Beispiel ist für jedes Tabellenfeld das gleiche großformatige Foto (Bildquelle: www.picabay.com) als Hintergrund gewählt.
Die CSS-Anweisungen zum Ausfüllen der Flächen lauten:
| CSS-Code:
| Ansicht:
|
#background { background-image:url(muster.jpg); background-size:auto; }
|
|
#background { background-image:url(muster.jpg); background-size:contain; }
|
|
#background { background-image:url(muster.jpg); background-size:cover; }
|
|
#background { background-image:url(muster.jpg); background-size:cover; opacity:20%; }
|
|
responsive Einbindung …
Bilder sollten sich der Bildschirmgröße des Betrachters anpassen. Viele Ratgeber für responsives Webdesign empfehlen, für verschieden große Anzeigemedien(von PC-Bilschirm bis Smartphone) unterschiedlich große Bilder anzubieten. Das erhöht natürlich den Aufwand für den Webdesigner enorm.
Eine andere Möglichkeit besteht darin, die potenzielle Anpassung an unterschiedliche Bildschirmgrößen bereits bei der Einbindung der Bild- oder Grafikdateien zu berücksichtigen.
farbiger Testbereich:
aspect-ratio:2/1
| Art:
| Code:
|
| HTML: Methode 1
| <img src="foto.jpg" style="max-width:100%; height:auto;">
|
| HTML: Methode 2
| <img src="foto.jpg" style="max-width:100%; aspect-ratio:4/3;">
|