HTML - Tags - <picture>

#101 of 147

picture

The picture element

audio bgsound image img picture source track video

Media


 <html>
 <body>
     <picture>
         <source srcset="images/waterloo-2k.gif" media="(min-width: 1536px)" />
         <source srcset="images/waterloo-1k.gif" media="(min-width: 1024px)" />
         <img src="images/waterloo-300px.gif" style="max-width: 100%" />
     </picture>
 </body>
 </html>

The picture element adds a responsive bitmap image.

Experimental

The img tag marks the insertion point and contains the default image and any CSS styling. The source elements contain alternative images each with an associated media query breakpoint. The order of evaluation is important. Evaluation of imges in a source set will stop as soon as the first media query breakpoint evaluates to true.

A live example:

N of

Ads by Google

Ask a question, send a comment, or report a problem - click here to contact me.