HTML - tags - <source>

#120 of 147
source

 <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 source element creates a reference to media content along with a media query that determines when it should be displayed.

A live example:


[waterloo.gif]

The resolution of the image will change as you resize your browser window.

See also: audio picture video

N of

Ads by Google

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

© Richard McGrath