html - srcset 属性未从尺寸显示正确的图像

Question

我创建了一个带有响应式图像的 HTML 页面。我使用带有大小的 srcset 属性来选择同一图像的不同大小。

<img    src="{{ $img_array[2] }}"
    srcset="{{ $img_array[0] }} 100w,
    {{ $img_array[1] }} 160w,
    {{ $img_array[2] }} 350w,
    {{ $img_array[3] }} 550w,
    {{ $img_array[4] }} 750w,
    {{ $img_array[5] }} 1000w"

    sizes=" (max-width:374px) 334px,
    (max-width:479px) 439px,
    (max-width:575px) 535px,
    (max-width:767px) 58px,
    (max-width:991px) 58px,
    (max-width:1199px) 58px,
    58px"

    alt="test">

在 1199px 宽度、991px 宽度和 767px 宽度中，图像在轮播幻灯片放映缩略图中使用。当我使用 iPad mini (DPR 2.0) 进行测试时，我希望加载 160W 图像，因为 DPR 为 2。（58 x 2 = 116 所以最接近的图像是 160W）但是浏览器在每个视口大小中加载 550W 图像。如何解决这个问题？

标签： htmlcssresponsive