Page Stats
Visitor: 242
HTML5 Picture Element
HTML5 introduced the <picture> element, which lets you define more than one image. The <picture> element works similar to the <video> and <audio> elements. You set up different sources, and the first source that fits the preferences is the one being used:
Example 1: Picture tag for responsive image
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<picture>
<source srcset="img_smallflower.jpg" media="(max-width: 400px)">
<source srcset="img_flowers.jpg">
<img src="img_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>
<p>Resize the browser width and the background image will change at 400px.</p>
</body>
</html>
Example 2: Picture tag with 2 media attributes.
<picture> <source media="(min-width: 768px)" srcset="image/img1.jpg"></source> <source media="(max-width: 767px)" srcset="image/img2.jpg"></source> <img alt="picture tag example" srcset="image/img.jpg" id="myid"> </picture>