image - 关于图片srcset标签的问题

Question

我正在尝试通过使用 srcset 在我的移动 web 视图站点上显示具有更好分辨率的图像，而不是那么大的 img。

这是问题所在。我当前的页面获得了 260x260 大小的 img_260。但我的标签必须是 140 ~ 180 宽度尺寸 [可能是 140 或 180 取决于我的移动设备类型]

所以，如果我的设备类型只代表 1dpr，我想它应该显示 img180，因为它的宽度为 180。如果我的设备类型代表 2dpr，我想它应该得到 360w，因为 360 尺寸的 img 在 2dpr 中会变成 180 尺寸。但在我的移动网络视图中，它总是保持 360 尺寸的 img。

请需要一些帮助。

  <div>
       <picture>
           <source srcset="img180 180w, img260 260w, img360 360w">
       </picture>
    </div>

标签： imagewebviewresponsive-imagessrcset

Answer 1

是的，我明白了。实际上你应该为三个图像使用三个 srcset 标签，但你只使用一个。看看https://www.w3schools.com/tags/tag_picture.asp。它可以帮助你。