HTML-Referenzhandbuch

HTML-Tag-Übersicht

HTML: <picture> Element

Das HTML- <picture> -Element bietet verschiedene Anzeigungen durch die Einbeziehung von null oder mehreren <source> -Elementen und einem <img> -Element für verschiedene Anzeigungen/Geräteszenarien bieten Bildversionen an. Der Browser wählt den am besten passenden Unter- <source> -Element aus, wenn keine Übereinstimmung vorliegt, wird die URL im src-Attribut des <img>-Elements verwendet. Das ausgewählte Bild wird dann im Bereich des <img>-Elements angezeigt.

Beispiel

Angezeigt werden verschiedene Bilder basierend auf der verschiedenen Bildschirmgröße, wenn keine Übereinstimmung vorliegt oder der Browser die picture-Eigenschaft nicht unterstützt, wird das img-Element verwendet:

Beispiel

!DOCTYPE　html>
<html>
<head>
<meta　charset="utf-8">
<title>基础教程(oldtoolbag.com)</title>
</head>
<body>
<h2>picture　元素</h2>
<picture>
　　<source　media="(min-width:　650px)"　srcset="/run/html/views.png">
　　<source　media="(min-width:　465px)"　srcset="/run/html/default.jpg">
　　<img　src="/run/html/haha.gif"　　style="width:auto;">
</picture>
</body>
</html>

Test to see if it works ‹/›

Definition

The <picture> element allows us to display different images on different devices and is generally used for responsiveness.

HTML5 The <picture> element was introduced to make the adjustment of image resources more flexible.

The <picture> element may contain zero or more <source> elements and one <img> element. Each <source> element matches a different device and references a different image source. If there is no match, the URL in the src attribute of the <img> element is selected.

Note: 　　　　

　　　　　　　　The <img> element is placed at the last 　<picture> After the element, if the browser does not support the attribute, the image of the <img> element is displayed. 　　　　

Browser Support

The numbers in the table indicate the first browser version that supports the element.

IEFirefoxOperaChromeSafari

HTML 4.01 and HTML5 difference between

The <picture> attribute is an HTML5 Newly Defined.

Global Attributes

Support for <picture> Tag Global Attributes of HTML.

Event Attributes

Support for <picture> Tag HTML Event Attributes.

HTML: <q> Tag HTML: <pre> Tag