如何在 C# MVC 中使用 BBC 的 Imager.Js 作为响应式图像

本文关键字:Js Imager 响应 图像 BBC MVC | 更新日期: 2023-09-27 18:31:19

我想使用BBC Imager.js库根据设备窗口大小在我的网站上加载响应式图像。我已经在服务器上存储了不同大小的图像。

我已经在github上关注了BBC-News/Imager.js/的文档,但由于缺乏知识,我无法让它工作。请帮助我如何完成此任务,或者是否有更好的技术来完成这项工作。

如何在 C# MVC 中使用 BBC 的 Imager.Js 作为响应式图像

我解决了我的问题。我打算使用这是一种古老的技术,现在使用<Picture>标签根据我们图像目录中的浏览器大小自动选择图像。

<picture> <source media="(min-width: 1024px)" srcset="www.example.com/image-large.jpg, www.example.com/image-large.jpg 2x"> <source media="(min-width: 768px)" srcset="www.example.com/image-medium.jpg, www.example.com/image-medium.jpg 2x"> <source media="(min-width: 480px)" srcset="www.example.com/image-mobile.jpg, www.example.com/image-mobile.jpg 2x"> <source srcset="www.example.com/image-small.jpg, www.example.com/image-small.jpg 2x"> <img src="www.example.com/image-mobile.jpg" alt="@item.Title"> </picture>

此图片标签中的图像标签适用于较旧的浏览器支持,希望它会有所帮助。