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
![](https://www.elithecomputerguy.com/wp-content/uploads/2020/02/picture700.jpg)
picture400.jpg
![](https://www.elithecomputerguy.com/wp-content/uploads/2020/02/picture400.jpg)
picture200.jpg
![](https://www.elithecomputerguy.com/wp-content/uploads/2020/02/picture200.jpg)
Be the first to comment