X

Headline

This is an important message requiring you to make a choice if you're based in the EU.

HTML-Tag <picture>

Das Tag <picture> wird verwendet, um ein oder mehrere Elemente <source> und ein Element <img> zu speichern.

Der Browser betrachtet den Inhalt der Tochterelemente <source>, und falls keine der angegebenen Bedingungen für die Hochladung von Bildern befriedigen sein kann, lädt der Browser das im Tag <img> angegebene Bild hoch.

Der Gebrauch des Elements <picture> erlaubt, einige Varianten des Bildes, die für die verschiedenen Bildschirme geeignet sind, hochzuladen.

Das Tag <picture> ist neu in HTML 5.

Syntax

Das Tag <picture> wird gepaart verwendet, sein Inhalt wird zwischen den Start- (<picture>) und Endtags (</picture>) platziert.

Das Tag <picture> enthält ein oder mehrere Elemente <source> und ein Element <img>, welches das letzte Kindelement im Block ist.

<picture>
  <source media="...">
  <source media="...">
  <img src="...">
</picture>

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
  </head>
  <body>
    <picture>
      <source media="(min-width: 650px)" alt="img_1" srcset="/uploads/media/news_gallery/0001/01/thumb_348_news_gallery_list.jpeg">
      <source media="(min-width: 430px)" alt="img_2" srcset="/uploads/media/news_gallery/0001/01/thumb_316_news_gallery_list.jpeg">
      <img src="/uploads/media/news_gallery/0001/01/thumb_366_news_gallery_list.jpeg" alt="img" style="width:auto;">
    </picture>
    <p>Einige Information über das Bild</p>
  </body>
</html>

Attribute

Attribut Wert Beschreibung
media media_query Es akzeptiert jede gültige Mediaabfrage, die normalerweise durch CSS definiert würde.
sizes Es definiert einen einzelnen Breitendeskriptor, eine einzelne Mediaabfrage mit dem Breitendeskriptor oder eine kommaabgegrenzte Liste von Mediaabfragen mit einem Breitendeskriptor.
Es ist ein neues Attribut in HTML5.
src URL Es gibt die URL-Adresse des Images an.
srcset URL Es gibt die URL-Adresse des Images an, um in verschiedenen Situationen zu verwenden. (obligatorish)
Es ist ein neues Attribut in HTML5.
type video/ogg
video/mp4
video/webm
audio/ogg
audio/mpeg
Es definiert den MIME-Typ.

Das Tag <picture> unterstützt Globale Attribute.


Browser-Support

38+ 38+ 9.1+ 25+


Finden Sie das nützlich?

Ähnliche Artikel