Html 图像大小属性中允许哪些介质条件？

我试图找出HTML

img

size属性中允许哪些媒体条件

HTML标记：

<img
class="cover"
alt="'. $hero_image_alt .'"
src="'. $hero_img_url_530w[0] .'"
srcset="'. $hero_img_url_360w[0] .' 360w,
        '. $hero_img_url_1470w[0] .' 1470w"
sizes="(min-device-width: 360px) and (max-device-width: 480px) 360px,
       (min-device-width: 481px) 1470px,
       1470px"
disable-inline-width data-hero />

当我在响应模式下检查页面时，我的代码适用于具有

DPR:2

（屏幕截图1）以及

DPR:1

的所有设备。当我切换到具有

DPR:3

大小的设备时，介质停止工作（屏幕截图2）。也许

size

属性根本不起作用，它只是从

srcset

中获取最合适的图像，并且只要DPR为3，这意味着逻辑宽度为

360px*3dpr=1080px

-使用1470w图像。我可以在大小介质中使用类似

（-webkit-min-device-pixel ratio:2）

或

（最小分辨率：72dpi）

这样的工具来进行更高级的控制吗

截图1

截图2

---

到目前为止，最好的解决方案是在

srcset

中使用DPR值，并去掉

大小。该解决方案唯一的问题是，它将在
DPR:2
移动屏幕上使用990w图像，如iphone6/7/8

<img
class="cover pos-left-top"
alt="'. $hero_image_alt .'"
src="'. $hero_img_url_530w[0] .'"
srcset="'. $hero_img_url_375w[0] .' 3x,
        '. $hero_img_url_768w[0] .' 3.5x,
        '. $hero_img_url_990w[0] .' 2x,
        '. $hero_img_url_1470w[0] .'"
disable-inline-width data-hero />