HTML：srcset 和尺寸，我做错了吗？

Question

我尝试使用 HTML srcset 和尺寸加载我调整大小的图像，但浏览器仍然只加载较大的图像。

我的 HTML 看起来像这样：

<img
    srcset="/logo-146x30.jpg 146w, /logo-122x25.jpg 122w, /logo-97x20.jpg 97w"
    sizes="(min-width: 651px) 146px, (min-width: 361px) 121px, 97px"
    src="/logo-146x30.jpg"
    alt="alt text"
/>

我也尝试过反对媒体查询，例如：

<img
    srcset="/logo-146x30.jpg 146w, /logo-122x25.jpg 122w, /logo-97x20.jpg 97w"
    sizes="(max-width: 360px) 97px, (max-width: 650px) 121px, 146px"
    src="/logo-146x30.jpg"
    alt="alt text"
/>

在这两种情况下，我总是得到图像/logo-146x30.jpg。

我已尝试以缩小尺寸重新加载浏览器，但无论哪种方式，唯一加载的图像是/logo-146x30.jpg。

视口元也是这样的：

<meta
    name="viewport"
    content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no"
>

你觉得我到目前为止所做的有什么问题吗？

Answer 1

使用 CSS 媒体查询，而不是使用 srcset 和尺寸。这是我的想法，但试试类似的东西（这是基于你的第一张图片）：

HTML：

<div class="image" />

CSS：

@media screen and (min-width: 651px) {
  .image {
    background-image: url(/logo-146x30.jpg);
  }    
}

@media screen and (min-width: 361px) and (max-width: 650px) {
  .image {
    background-image: url(/logo-122x25.jpg);
  }
} 

记得在@media 中使用 min-width 和 max-width，这样它就不会被覆盖。 尝试在您的解决方案中使用 min-width 和 max-width。