<picture>

HTML <picture> Tag

The <picture> element is a container for one or more <source> elements and one <img> element, which is the last child element in the block.

The <source> element contains versions of an image for different display device scenarios. The <img> element describes the image’s size and other attributes. The browser considers each of the child <source> elements and loads the most appropriate image. If no matches are found, the browser displays the image specified by the <img> tag.

The <picture> element allows to specify several images designed to more correctly fill the browser viewport instead of having one image scaled based on the viewport width. It can be used for the following purposes:

  • to crop and modify images for different media conditions,

  • to offer alternative image formats when specific formats are not supported.

Use the object-position property to adapt the positioning of the image inside of the frame of the element, and the object-fit property to control how the image should be resized to fit inside the frame.

The <picture> tag is new in HTML5.

Syntax

Syntax

The <picture> tag comes in pairs. The content is written between the opening (<picture>) and closing (</picture>) tags.

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

Example of the HTML <picture> tag:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</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>Some information about pictures</p>
  </body>
</html>

Attributes

Attributes

AttributesValueDescription
mediamedia_queryAccepts any valid media query that would normally be defined in a CSS.
sizesDefines a single width descriptor, a single media query with width descriptor, or a comma-delimited list of media queries with a width descriptor.
New attribute in HTML5.
srcURLSpecifies the URL of the image.
srcsetURL(required)Specifies the URL of the image to use in different situations.
New attribute in HTML5.
typevideo/ogg video/mp4 video/webm
audio/ogg audio/mpegDefines the MIME type.

The <picture> tag supports the Global Attributes.



请遵守《互联网环境法规》文明发言,欢迎讨论问题
扫码反馈

扫一扫,反馈当前页面

咨询反馈
扫码关注
返回顶部