HTML Intro – Picture Tag (Responsive Images)

The Picture Tag allows you to change the size of an image displayed in an HTML document based on the width of the browser window.

picture.html

<picture>
<source media="(min-width: 900px)" srcset="./picture700.jpg">
<source media="(min-width: 600px)" srcset="./picture400.jpg">
<img src="./picture200.jpg">
</picture>

<p> This is an example of how to format images for a responsive website. Now not only will the text adjust to the size of the screen, but so will the images.</p>

picture700.jpg

picture400.jpg

picture200.jpg

Be the first to comment

Leave a Reply