Verwenden von Bildern in HTML

Diese Artikel decken einige der HTML-Elemente und CSS-Eigenschaften ab, die verwendet werden, um zu steuern, wie Bilder im Web angezeigt werden.

<img>

Das HTML <img>-Element wird verwendet, um ein Bild in eine Webseite einzubetten. Es unterstützt eine breite Palette von Attributen, die steuern, wie das Bild sich verhält, und erlaubt es Ihnen, wichtige Informationen wie alt-Text für Personen hinzuzufügen, die das Bild nicht sehen können.

<picture>

Das HTML <picture>-Element enthält null oder mehr <source>-Elemente und ein <img>-Element, das Versionen eines Bildes für verschiedene Anzeige-/Geräteszenarien bereitstellt. Der Browser berücksichtigt jedes Kind-<source>-Element und wählt das am besten passende aus.

object-fit

Die object-fit CSS-Eigenschaft legt fest, wie der Inhalt eines ersetzten Elements, wie eines <img> oder <video>, an die Größe seines Containers angepasst werden soll.

object-position

Die object-position CSS-Eigenschaft gibt die Ausrichtung des Inhalts in einem ausgewählten ersetzten Element innerhalb des Boxmodels des Elements an. Bereiche der Box, die nicht vom Objekt des ersetzten Elements bedeckt sind, zeigen den Hintergrund des Elements.

background-image

Die background-image CSS-Eigenschaft legt ein oder mehrere Hintergrundbilder für ein Element fest.

Diese Artikel bieten Anleitungen zur Auswahl und Konfiguration von Bildtypen.

Leitfaden zu Bilddateitypen und -formaten

Ein Leitfaden zu den verschiedenen Bilddateitypen, die von Webbrowsern allgemein unterstützt werden, einschließlich Details zu ihren jeweiligen Anwendungsfällen, Fähigkeiten und Kompatibilitätsfaktoren. Darüber hinaus bietet dieser Artikel Anleitungen zur Auswahl des besten Bilddateityps für eine gegebene Situation.

Das Einfügen von width und height-Attributen hilft, Ruckeln zu vermeiden

Dies ändert, wie Browser Bilder laden, sodass deren Seitenverhältnisse frühzeitig vom Browser berechnet werden und später verwendet werden können, um die Anzeigengröße eines Bildes zu reservieren, bevor es geladen wird.

Verwandte Themen, die von Interesse sein könnten.

Responsive Bilder

In diesem Artikel lernen wir das Konzept der responsiven Bilder kennen – Bilder, die auf Geräten mit sehr unterschiedlichen Bildschirmgrößen, Auflösungen und anderen Merkmalen gut funktionieren – und sehen uns an, welche Werkzeuge HTML bietet, um deren Implementierung zu erleichtern.