Zum Inhalt springen

img

Definiert ein Bild, das in die Webseite eingefügt wird.

Beispiel:

Picture of a Ha Long Bay sunset
<img src="/images/sunset.jpg" alt="Picture of a Ha Long Bay sunset">

Beispiel:


Picture of a Ha Long Bay sunset“ sizes=“(min-width: 800px) 720px, 360px“>
<!-- 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"

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.

Nach oben