我设置了以下 img srcset:
<img srcset="http://via.placeholder.com/320x150 320w,
http://via.placeholder.com/480x150 480w,
http://via.placeholder.com/800x150 800w"
src="http://via.placeholder.com/800x150"
sizes="(max-width: 320px) 280px,
(max-width: 480px) 440px,
800px"
width="200" />
无论我如何设置img的宽度,或者如何调整窗口大小,chrome总是下载并显示800px宽的图像。是什么赋予了?添加 size 属性也没有效果。我引用了这个article .
最佳答案
您正在以正确的方式使用 srcset。 Srcset 适用于当您有大图像并且在较小设备上有较小格式时。如果加载最大的图像,则无需加载另一个较小的图像(因为 srcset 适用于同一图像)。这导致当您在手机上打开此代码时,它将显示最小的图像,但当您在桌面上时,它将打开常规图像。如果您再次升级浏览器,srcset 会将您的图像替换为更大的图像,但它永远不会交换回较低的图像。我希望我说得更清楚了。
关于html - HTML5中如何正确使用图片srcset,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50864796/