Task:
Write a HTML code for displaying different images depends on screen resolution.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Displays Different Pictures</title>
</head>
<body>
<p>This page shows car picture that depands on resolution of your device.</p>
<ul>
<li>Device width is less than or equal to 400px then you can see <b>Landrover</b> car.</li>
<li>Device width is less than or equal to 700px then you can see <b>Mahindra</b> car.</li>
<li>Device width is greater than 700px then you can see <b>Tata</b> car.</li>
</ul>
<picture>
<source srcset="images/landrover.jpg" media="(max-width:400px)" width="50%" />
<source srcset="images/mahindra.jpg" media="(max-width:700px)" width="50%" />
<img src="images/tata.jpg" />
</picture>
</body>
</html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Displays Different Pictures</title>
</head>
<body>
<p>This page shows car picture that depands on resolution of your device.</p>
<ul>
<li>Device width is less than or equal to 400px then you can see <b>Landrover</b> car.</li>
<li>Device width is less than or equal to 700px then you can see <b>Mahindra</b> car.</li>
<li>Device width is greater than 700px then you can see <b>Tata</b> car.</li>
</ul>
<picture>
<source srcset="images/landrover.jpg" media="(max-width:400px)" width="50%" />
<source srcset="images/mahindra.jpg" media="(max-width:700px)" width="50%" />
<img src="images/tata.jpg" />
</picture>
</body>
</html>