img
Definiert ein Bild, das in die Webseite eingefügt wird.
Beispiel:
<img src="/images/sunset.jpg" alt="Picture of a Ha Long Bay sunset">Beispiel:
“ sizes=“(<!-- For responsive images, use srcset and sizes -->
<img src="/images/sunset-360.jpg"
alt="Picture of a Ha Long Bay sunset"
srcset="/images/sunset-360.jpg 360w,
/images/sunset-720.jpg 720w,
/images/sunset-1440.jpg 1440w>"
sizes="(min-width: 800px) 720px, 360px"> src
Die URL, unter der das Bild gehostet wird.
Required.
"/images/tiramisu.jpg"
Sie können eine relative URL verwenden.
"https://htmlreference.io/images/traffic.jpg"
Sie können eine absolute URL verwenden.
alt
Alternativer Text zur Beschreibung des Bildes, wenn dieses nicht verfügbar ist. Wird von Bildschirmlesern verwendet.
Required.
"Picture of a man standing in front of the Dragon's Pearl boat"
Beschreiben Sie das Bild, als ob es nicht vorhanden wäre.
srcset
Definiert eine Liste von verschiedenen Quellen für das gleiche Bild. Der Browser wählt dann die beste Quelle aus.
"/images/[email protected] 2x"
Sie können einen Pixeldichte-Deskriptor wie 2x definieren. In diesem Fall ist [email protected] 720px breit.
<img src="/images/sunset.jpg"
srcset="/images/[email protected] 2x"
alt="Picture of a Ha Long Bay sunset">Der Browser verwendet entweder sunset.jpg oder [email protected] je nach dem verfügbaren Platz, der Pixeldichte usw.
"/images/sunset-360.jpg 360w,
/images/sunset-720.jpg 720w,
/images/sunset-1440.jpg 1440w"
/images/sunset-720.jpg 720w,
/images/sunset-1440.jpg 1440w"
Sie können einen Breitendeskriptor wie 360w verwenden. Dieser Wert wird durch eine der Quellgrößen (definiert im Attribut sizes) geteilt, um die Pixeldichte zu erhalten.
<img src="/images/sunset-360.jpg"
alt="Picture of a Ha Long Bay sunset"
srcset="/images/sunset-360.jpg 360w,
/images/sunset-720.jpg 720w,
/images/sunset-1440.jpg 1440w>"
sizes="(min-width: 800px) 720px, 360px"> sizes
Definiert eine Liste von verschiedenen Quell-Größen. Sie können jede von ihnen mit einer Medienabfrage kombinieren.
"(min-width: 800px) 1440px, 720px"
Der Browser verwendet das 1440px Bild (definiert in srcset), wenn der Viewport größer als 800px ist.
Andernfalls verwendet er das 720px.
<img src="/images/sunset-360.jpg"
alt="Picture of a Ha Long Bay sunset"
srcset="/images/sunset-360.jpg 360w,
/images/sunset-720.jpg 720w,
/images/sunset-1440.jpg 1440w>"
sizes="(min-width: 800px) 720px, 360px"> height
Legt die Höhe des Bildes fest.
"240"
Die Höhe in Pixel.
width
Legt die Breite des Bildes fest.
"120"
Die Breite in Pixel.
- Virtuelle private Netzwerke (VPN): Was steckt hinter dieser Technologie? - 30. August 2022
