使用 srcset 的 img 在给定的宽度上不会改变

编程问答 2022-06-02

问题描述

我要向我的网站添加一张图片，该图片需要根据屏幕分辨率（很常见）具有不同的尺寸。

然而，让我感到困惑的是，我在 <img srcset="X"> 中设置的图像在给定的宽度下没有变化。

（快速说明，我在 chrome 中使用 incogento，所以这不是著名的缓存问题）

无论如何 - 继续表演：

多张图片（特定尺寸）

enter image description here

HTML 代码：

<img src="im2/1280.jpg"
    srcset="im2/120.jpg 120w,im2/320.jpg 320w,im2/640.jpg 640w,im2/1280.jpg 1280w,im2/1920.jpg 1920w"
    sizes="(max-width: 250px) 120px,(max-width: 480px) 320px,(max-width: 720px) 640px,(max-width: 1400px) 1280px,(max-width: 2000px) 1920px," 
    alt="Image description">

所以根据我上面的代码，我希望第一张图片是 120.jpg（如果屏幕宽度低于 250px） - 但是：

enter image description here

第一个是 320px

enter image description here

在 460 像素时显示 1280 像素的图像

enter image description here

我的猜测是我错过了一些有关其工作原理的关键信息。

如果有人能对此有所了解，那就太好了。

提前致谢 - 沃利

解决方法

可以在这里找到一篇关于这个主题的很棒的文章（它的下一级解释了应该如何使用图片和 srcset 标签）

https://alligator.io/html/picture-element/

简短的回答是使用 srcset <img> 的图像标签 <img srcset="X"> 将被赋予图像的宽度，以便浏览器决定如何处理 <img srcset="X.jpg 200w">

但是是浏览器根据给定的值决定使用什么图像。

即

<img srcset="X.jpg 1000w">

浏览器可能会在 400 像素宽的显示器上使用它

有关在特定屏幕尺寸下使用的特定图像，请参阅提供所有所需信息的链接文章。

imageimageresponsivesrcset