Html img srcset,不显示手机小图

Html img srcset, does not show small image for mobile

下面显示的我的代码在台式计算机上运行良好,当我调整大小时替换不同尺寸的图像 window。

但是我在手机上打开网站时,它不起作用。正在加载名称为 'xlg' 的移动网络浏览器图像。相反,我当然希望加载 'sm' 图像。

谁能告诉我,问题出在哪里?

我也用过

<picture><source></source></picture>

但在这种情况下,我必须以这种方式呈现图像。

 <img 
      srcset="sm.jpg 768w,
              md.jpg 1024w,
              lg.jpg 1440w,
              xlg.jpg 1600w"
      sizes="(max-width: 768px) 768px,
             (max-width: 1024px) 1024px,
             (max-width: 1440px) 1440px,
             (min-width: 1441px) 1600px"
      src="sm.jpg"
      alt="">

为什么在移动设备上显示 xlg.jpg 图片?有人知道吗?

动态图片可以试试这个。 HTML srcset Attribute 此示例在桌面和移动设备上对我都适用。

根据示例,您的代码可能如下所示:

<picture>
    <source media="(min-width: 1440px)" srcset="xlg.jpg">
    <source media="(min-width: 1024px)" srcset="lg.jpg">
    <source media="(min-width: 768px)" srcset="md.jpg">
    <img src="sm.jpg" alt="" style="width:auto;">
</picture>

如果我对您的评论理解正确,那么这些浏览器显然不支持 srcset。如果您检查 caniuse 然后您会看到 Opera Mini 和默认的 Android 浏览器不支持该功能。

所以您可能正在寻找永远行不通的东西。