Hi amar,
For using the srcset use the picture element.
The srcset attribute allows to define a set of source images the browser should consider display when rendering the HTML to the user.
In this example
When the maximum width of the viewport is 500px, the image will be set as 1.png.
When the maximum width of the viewport is 768px, the image will be set as 2.png.
When the maximum width of the viewport is 2000px, the image will be set as 3.png.
Controller
public class HomeController : Controller
{
public IActionResult Index()
{
return View();
}
}
View
@addTagHelper*, Microsoft.AspNetCore.Mvc.TagHelpers
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<picture>
<source media="(max-width: 500px)" srcset="/Images/1.png" />
<source media="(max-width: 768px)" srcset="/Images/2.png" />
<source media="(max-width: 2000px)" srcset="/Images/3.png" />
<img src="/Images/1.png" alt="srcset example" />
</picture>
</body>
</html>
Screenshot
