CSS-Techniken für Bilder
07.07.2021, 09:25 Uhr
Bildbearbeitung per CSS
Mit CSS lassen sich Bilder skalieren, mittels Filter bearbeiten, zurechtschneiden und vieles mehr.
Dass CSS inzwischen viel mächtiger ist als früher, zeigt sich auch an den Möglichkeiten für die Bildbearbeitung. Bilder in der Größe ändern? Schärfer machen? Farben und Kontraste feinjustieren? Bilder zurechtschneiden oder in eine besondere Form bringen? Das alles geht inzwischen mit CSS. Der Artikel stellt Ihnen die Eigenschaften vor, die Sie dafür brauchen, und außerdem erfahren Sie, wann eine Bildbearbeitung per CSS sinnvoll oder sogar das einzige Mittel der Wahl ist. Für die Bildbearbeitung stehen eine Reihe von CSS-Eigenschaften zur Auswahl:
- Die Ausmaße von Bildern können Sie mit CSS über width und height bestimmen.
- Für Seitenverhältnisse ist die Eigenschaft aspect-ratio praktisch oder etwas altmodischer der padding-Trick.
- Wenn ein Bild ein Element ausfüllen soll, brauchen Sie object-fit und können mit object-position dann noch die Position feinjustieren
- Um Bilder zu verschieben, in der Größe zu ändern oder zu drehen, ist die Eigenschaft transform mit den Funktionen translate(), scale() oder rotate() die richtige Wahl.
- Die Form von Bildern können Sie mit border-radius, clip-path oder mask verändern.
- Dank der Eigenschaft filter können Sie beispielsweise Farben in Grautöne umwandeln, Bilder unschärfer machen, Kontraste erhöhen und mehr.
- mix-blend-mode erlaubt das Überblenden von mehreren Bildern oder von Bild und Hintergrundfarbe.
- Daneben können allgemeine Eigenschaften wie display oder overflow: hidden nützlich sein.
Jetzt 1 Monat kostenlos testen!
Sie wollen zukünftig auch von den Vorteilen eines plus-Abos profitieren? Werden Sie jetzt web&mobile Developer plus Kunde.
- + Digitales Kundenkonto,
- + Zugriff auf das digitale Heft,
- + Zugang zum digitalen Heftarchiv,
- + Auf Wunsch: Weekly Newsletter,
- + Sämtliche Codebeispiele im digitalen Heftarchiv verfügbar
