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 浏览器不支持该功能。
所以您可能正在寻找永远行不通的东西。
下面显示的我的代码在台式计算机上运行良好,当我调整大小时替换不同尺寸的图像 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 浏览器不支持该功能。
所以您可能正在寻找永远行不通的东西。