Quelle: Foto: VectorMine  / Shutterstock
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.

web & mobile DEVELOPER

Sie wollen zukünftig auch von den Vorteilen eines plus-Abos profitieren? Werden Sie jetzt web&mobile Developer plus Kunde.
  • 2 Monate Gratis testen
  • Über 4.000 qualifizierte Fachartikel
  • Diverse DevBooks thematisch für Sie zusammen gestellt
  • Webcasts von 30 - 90 Min.
  • Aufzeichnungen von ausgewählten Fortbildungen und Konferenzen
  • Auf jedem Gerät verfügbar