html - 使用 srcset 和尺寸指定像素密度的图像

Question

我正在尝试掌握 srcset，但我无法找到详细的参考。

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

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

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

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

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

score -1 · Accepted Answer

带有 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">

1 回答 1