HTML Reference Manual

HTML tag大全

HTML: <picture> element

The HTML <picture> element provides different display options by including zero or more <source> elements and one <img> element for different displays/Device scenarios provide image versions. The browser will choose the most matching sub <source> element. If there is no match, it will choose the URL in the src attribute of the <img> element. Then, the selected image is displayed in the space occupied by the <img> element.

Example

Display different images according to different screen sizes. If no match is found or the browser does not support the picture attribute, the img element is used instead:

Example

<!DOCTYPE　html>
<html>
<head>
<meta　charset="utf-8">
<title>Basic Tutorial(oldtoolbag.com)</<title>
</<head>
<body>
<h2>picture　element</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 and see ‹/›

Definition

The picture element allows us to display different images on different devices and is generally used for responsive design.

HTML5 The <picture> element introduces more flexible adjustment of image resources.

The <picture> element contains zero or more <source> elements and one <img> element, each <source> element matches different devices and refers to different image sources; if there is no match, the url in the src attribute of the <img> element is selected.

Note: 　　　　

　　　　　　　　The <img> element is placed in 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 with HTML5 differences

The <picture> attribute is in HTML5 Newly defined.

Global Attributes

Support for <picture> tag HTML Global Attributes.

Event Attributes

Support for <picture> tag HTML Event Attributes.

HTML: <q> tag HTML: <pre> tag