极客观点
项目管理
HarmonyOS
小白求助，我想图片在浏览器宽度小于1024px是显示小图片，大于1024px是显示大图片，看了张鑫旭的博客没看明白，试了一下没实现效果.
浏览器宽度小于1024px时，加载的还是大图片，我哪里理解错了？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>响应式图片</title>
<style>
img {display: block}
</style>
</head>
<body>
<img class="image" src="http://7xo5hi.com1.z0.glb.clouddn.com/0704onePlus_activity_small.jpg"
srcset="http://7xo5hi.com1.z0.glb.clouddn.com/0704onePlus_activity_small.jpg 640w,http://7xo5hi.com1.z0.glb.clouddn.com/0704onePlus_activity_large.jpg 1920w"
sizes="(max-width:1023px) 640px,1920px">
<img class="image1" src="http://7xo5hi.com1.z0.glb.clouddn.com/0704onePlus_activity_small.jpg">
</body>
</html>调试结果（小图片是由大图片裁剪的，不完整，左侧山顶只有大图的一半）
其实你写的并没有问题
但是注意张鑫旭文章说的
运行一下你的代码
可以看到在1023以下是小图，在1023以上变大图了
但是再缩小就不会变成小图了，因为浏览器会自动匹配最佳显示的图片，就是大图既然缓存了就用大图了
更直观的来看一下，我有一张128的图，在1像素比的情况下，显示128px的图，在2像素比的情况下，显示256px的图，但是再改回去就不会变成了128px了，因为已经缓存了最佳图片
这样，你就得保证用户第一次打开页面的视窗小于1023，不然就会直接显示大图，小图以后也不会显示了。
所以你想实现两张不同的这样的效果似乎用这srcset其实并不合适，srcset还是适合相同的图片，不同的精度。
这是我的理解，有错误欢迎指出。