MDN: Responsive images 介绍了在前端实现响应式图片的几种方法：
- 为不同尺寸的屏幕加载不同大小的图片（
srcset配合sizes） - 固定图片大小，为不同 DPI 的屏幕加载不同 DPI 的图片（
srcset） - 为不同尺寸的屏幕加载不同的图片（
picture配合多个source）
WordPress 采用 srcset/sizes 方案实现响应式图片，默认的设置为 sizes="(max-width: {{image-width}}px) 100vw, {{image-width}}px"。当页面宽度小于图片原始宽度时，以页面宽度（100vw）作为图片的显示宽度，当页面宽度大于图片宽度时，总会以图片原始宽度作为显示宽度。但实际上，不是所有的图片都会以原始宽度在页面上展示，由于排版样式的影响，图片的展示宽度往往跟原始宽度不一致。
为了解决这个问题，需要使用 Enhanced Responsive Images 插件，这个插件会基于当前主题的 Content Width, Wide Width 为图片元素设置 srcset/sizes，相较于默认的实现，可以为大屏设备在图片宽度小于窗口宽度时提供更加合适的缩略图尺寸。
启用后的效果如下图：
可以看到，虽然 img 元素的大小只有 800×312 px，但是浏览器选择了展示原图（1341 x 523 px），这是因为我的屏幕启用了 HiDPI，1 css px 约等于 2 显示器 px，这种情况下，浏览器使用更大尺寸的图片是合理的。
发表回复