使用 srcset 和尺寸指定像素密度的图像答案

【问题标题】：Specifying image for pixel density with srcset and sizes使用 srcset 和尺寸指定像素密度的图像
【发布时间】：2016-02-05 08:20:02
【问题描述】：

我正在尝试掌握 srcset，但找不到详细的参考资料。

据我了解，我可以做这样的事情来为手机指定图像。

<img src="1.jpg" alt=""
  srcset="1x300.jpg 300w"
  sizes="(max-width: 480px) 300px">

但我不清楚如何指定为显示密度校正图像。

在上面的示例中，屏幕宽度小于 480 像素，我指定使用 300 像素的图像。然而，在 2x 视网膜显示器上，我想要一个 600 像素宽度的图像，但屏幕尺寸仍将读取为 480 像素。

如何为不同的像素密度指定另一个图像？

【问题讨论】：

标签： html srcset

【解决方案1】：

带有 SRCSET 和 SIZES 的 IMG 标签的基本结构，

<img src="images.jpg" srcset="images1x.jpg 200w, images2x.jpg 400w,
images8x.jpg 600w" sizes="(max-width: 40em) 100vw, 50vw" alt="Some Text">

【讨论】：