图像尺寸属性允许哪些媒体条件？

Question

我正在尝试确定 HTML img 尺寸属性中允许哪些媒体条件。

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）。也许 sizes 属性根本不起作用，它只是从 srcset 中获取最合适的图像，一旦 DPR 为 3，这意味着逻辑宽度为 360px * 3dpr = 1080px - 使用 1470w 图像.我可以在 sizes media 中使用 (-webkit-min-device-pixel-ratio: 2) 或 (min-resolution: 72dpi) 之类的东西来进行更高级的控制吗？

截图1

截图2

Answer 1

目前最好的解决方案是在 srcset 中使用 DPR 值并去掉 sizes。该解决方案的唯一问题是它将在 DPR:2 移动屏幕上使用 990w 图像，例如 iphone 6/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 />

图像尺寸属性允许哪些媒体条件？

Which media conditions are allowed in image sizes attribute?

html

attributes

image

media-queries

amp-html