响应式 IMG 以保持视口大小和设备像素比

【问题标题】：Responsive IMG to maintain both viewport size and device pixel ratio响应式 IMG 以保持视口大小和设备像素比
【发布时间】：2019-11-06 20:52:05
【问题描述】：

我需要使用<img> 而不是<picture> 为视口大小和设备像素比提供不同的图像尺寸。示例（代码无效）：

<img srcset="store/img-200.jpg 180w, store/img-200.jpg 180w 2x">

有什么解决方法吗？

【问题讨论】：

标签： javascript html image responsive

【解决方案1】：

我已停止添加更多视口变量。

<img srcset="https://myserver.com/image?w=800&h=400 800w,
        https://myserver.com/image?w=1200&h=600 1200w,
        https://myserver.com/image?w=1600&h=800 1600w,
        https://myserver.com/image?w=2000&h=1000 2000w,
        https://myserver.com/image?w=2400&h=1200 2400w,
        https://myserver.com/image?w=2800&h=1400 2800w,
        https://myserver.com/image?w=3200&h=1600 3200w"
sizes="100vw">

浏览器会下载图片进行多种配置：

屏幕密度1，视口宽度等于或小于2400px
屏幕密度2，视口宽度等于或小于1200px
屏幕密度为 3，视口宽度等于或小于 800 像素

【讨论】：