diff options
Diffstat (limited to 'files/de/web/html/element/picture')
| -rw-r--r-- | files/de/web/html/element/picture/index.html | 103 |
1 files changed, 103 insertions, 0 deletions
diff --git a/files/de/web/html/element/picture/index.html b/files/de/web/html/element/picture/index.html new file mode 100644 index 0000000000..60bf6d78cd --- /dev/null +++ b/files/de/web/html/element/picture/index.html @@ -0,0 +1,103 @@ +--- +title: <picture> +slug: Web/HTML/Element/picture +translation_of: Web/HTML/Element/picture +--- +<div>{{HTMLRef}}</div> + +<p>Das <strong>HTML-Element <code><picture></code> </strong>ist ein Container, der zur Angabe mehrerer {{HTMLElement("source")}}s (Bildquellen) für ein {{HTMLElement("img")}} dient. Der Browser wird die Quelle verwenden, die aufgrund des gegenwärtigen Seitenlayouts (die Begrenzungen der Box, in der das Bild auftaucht) und dem Anzeigegerät (z.B. ein normales or hiDPI-Gerät) am geeignesten erscheint.</p> + +<h2 id="Usage_Context">Usage Context</h2> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Content categories</a></th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>, phrasing content, embedded content</td> + </tr> + <tr> + <th scope="row">Permitted content</th> + <td>Null oder mehr {{HTMLElement("source")}}-Elemente, gefolgt von einem {{HTMLElement("img")}}-Element, optional vermischt mit Skript-unterstützenden Elementen.</td> + </tr> + <tr> + <th scope="row">Tag omission</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Permitted parent elements</th> + <td> + <p>Jegliches Element, das eingebetteten Inhalt erlaubt.</p> + </td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{domxref("HTMLPictureElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attribute">Attribute</h2> + +<p>Dieses Element beinhaltet nur <a href="/en-US/docs/Web/HTML/Global_attributes">globale Attribute</a>.</p> + +<h2 id="Beispiel_1_Verwendung_des_Attributs_media">Beispiel 1: Verwendung des Attributs <code>media</code></h2> + +<p>Das Attribut <code>media</code> erlaubt die Angabe eines Media-Query, das der User Agent auswertet, um das gewünschte {{HTMLElement("source")}}-Element auszuwählen. Wenn ein Media Query zu <code>false</code> evaluiert, wird das {{HTMLElement("source")}}-Element übersprungen.</p> + +<pre class="brush: html"><picture> + <source srcset="mdn-logo-wide.png" media="(min-width: 600px)"> + <img src="mdn-logo-narrow.png" alt="MDN"> +</picture> +</pre> + +<h2 id="Beispiel_2_Verwendung_des_Attributs_type">Beispiel 2: Verwendung des Attributs <code>type</code></h2> + +<p>Das Attribut type erlaubt die Angabe eines MIME-Typs für Ressourcen, die im Attribut srcset des Elements {{HTMLElement("source")}} angegeben sind. Wenn der User Agent den angegebenen Typ nicht unterstützt, wird das {{HTMLElement("source")}}-Element übersprungen.</p> + +<pre class="brush: html"><picture> + <source srcset="mdn-logo.svg" type="image/svg+xml"> + <img src="mdn-logo.png" alt="MDN"> +</picture> +</pre> + +<p> </p> + +<h2 id="Beispiel_3_Verwendung_des_Attributs_srcset">Beispiel 3: Verwendung des Attributs <code>srcset</code></h2> + +<p>Das Attribut srcset erlaubt es verschiedene Bildgrößen auszuliefern. Höhere Auflösungen werden bei höheren Zoomstufen im Browser, oder bei Bildschirmen mit hohen Pixeldichten (DPI) geladen.</p> + +<pre class="brush: html"><picture> + <source srcset="mdn-logo.png 1x, mdn-logo_x2.png 2x, mdn-logo_x3.png 3x"> + <img src="mdn-logo.png" alt="MDN"> +</picture></pre> + +<p> </p> + +<h2 id="Spezifikation">Spezifikation</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'embedded-content.html#the-picture-element', '<picture>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +{{Compat("html.elements.picture")}} + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{HTMLElement("img")}}-Element</li> +</ul> |