Picture and Source Elements HTML

 Picture and Source Elements


The picture and source elements are used to provide alternative image sources for different screen sizes and resolutions. The picture element is used to wrap different source elements, each specifying a different image source and media query. The browser will select the appropriate image source based on the device's screen size and resolution.

Here's an example of how to use the picture and source elements:



<picture>

  <source media="(min-width: 800px)" srcset="large-image.jpg">

  <source media="(min-width: 400px)" srcset="medium-image.jpg">

  <img src="small-image.jpg" alt="My Image">

</picture>

No comments:

Post a Comment

The Importance of Cybersecurity in the Digital Age

 The Importance of Cybersecurity in the Digital Age Introduction: In today's digital age, where technology is deeply intertwined with ev...