Articles → HTML → Picture tag in html

Picture tag in html






Purpose





Syntax


<picture>
	<source media="(min-width:)" srcset=""> <img src="” alt=" " />
</picture>





Example


<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta charset="utf-8" />
	<title></title>
</head>

<body>
	<picture>
		<source media="(min-width:650px)" srcset="http://gyansangrah.com/ArticleImages/basic_silverlight_example_one.jpg">
		<source media="(min-width:465px)" srcset="http://gyansangrah.com/ArticleImages/svg_polygon_html5_one.jpg"> 
    <img src="http://gyansangrah.com/ArticleImages/basic_silverlight_example_one.jpg" alt="" style="width:auto;"> </picture>
</body>

</html>



Output


Picture showing the output of picture tag in html

Click to Enlarge


Browser Support


Internet ExplorerFirefoxChromeSafariOperaEdge
13.038.038.09.125.0Yes



Posted By  -  Karan Gupta
 
Posted On  -  Monday, September 21, 2020

Query/Feedback


Your Email Id  
 
Subject 
 
Query/FeedbackCharacters remaining 250