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

【问题标题】：Which media conditions are allowed in image sizes attribute?图像尺寸属性中允许哪些媒体条件？
【发布时间】：2021-06-03 22:22:47
【问题描述】：

我正在尝试找出 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 图像。我可以在尺寸媒体中使用(-webkit-min-device-pixel-ratio: 2) 或(min-resolution: 72dpi) 之类的东西来进行更高级的控制吗？

截图 1

截图 2

【问题讨论】：

标签： html image attributes media-queries amp-html

【解决方案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 />

【讨论】：