HTML < picture>
query_builder | Christopher PisaniThe HTML element < picture> is used to show different images to suite with any screen resolution presented. Multiple < source> elements can be used within the element < picture> to serve for different screen sizes.
A simple example to show how this element works
<style>
source, img {
width:100%;
}
</style>
<h2>Resize the screen to see the example to work</h2>
<picture>
<source media="(min-width: 650px)" srcset="/media/laptop.jpg">
<source media="(min-width: 465px)" srcset="/media/mamp.jpg">
<img src="/media/netbeans.jpg">
</picture>
Available Attributes
No specific attributes are assigned for this element, other than the standard global attributes.