HTML - Tags - <source>

#120 of 147

         <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%" />

The source element creates a reference to media content along with a media query that determines when it should be displayed.

A live example:


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