Question

下面显示的代码在台式计算机上可以正常工作，当我调整窗口大小时，可以重新放置具有不同大小的图像。

但是当我在手机上打开网站时，它不起作用。在移动网络浏览器上，正在加载名称为“ 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图片？有人知道吗？

Answer 1

您可以尝试使用动态图像。 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>

Answer 2

如果我正确理解了您的评论，那么那些普通的浏览器根本就不支持srcset。如果选中caniuse，则会看到Opera Mini和默认的Android浏览器不支持该功能。

所以您可能正在寻找永远无法使用的东西。

HTML img srcset，不会为手机显示小图像

2 个答案: