使用 `srcset` 属性实现自适应宽度的图片

Question

假设我有以下图片：

<img src="//picsum.photos/100" srcset="//picsum.photos/100 100w">

似乎我没有包括sizes属性，它的默认值为100vw，因此小图像被放大到视口的宽度。

如果我不想要这种行为，而是希望图像默认为其固有大小怎么办？

我期望这张图片在普通显示器上的默认宽度为100px，在2倍（Retina）显示屏上为50px。

如果我指定自己的sizes属性为100px，这并不能解决在Retina显示屏上以50px显示它的问题。

我需要这种行为的原因是，在我的系统中，允许用户上传任何大小的图像并将它们放置在页面上，我正在生成一个srcset与多个步骤，直到其图像的最大大小，并且我需要一种方法根据用户屏幕的像素密度和图像的大小来正确地显示图像的宽度。

使用srcset可以实现自适应宽度图像的这种行为吗？

在我的研究中，我发现了这篇文章，直接解决了这个问题。作者建议添加具有图像最大大小的width属性，以恢复sizes属性对图像固有大小所做的更改。然而，他没有解决如何使其与不同的像素密度兼容的问题。

- Nathan Arthur

Answer 1

很遗憾，似乎没有一种方法可以使带有srcset的图像默认为其自然大小，并考虑DPR。如果未在带有srcset的图像上设置sizes属性，则该属性默认为100vw，它会重新定义图像的固有宽度，似乎没有一种方法可以在不提供显式宽度的情况下重置它。

在我的具体情况中，我发现我们已经将用户的DPR存储在cookie中，因此在服务器端，我开始将图像的width属性设置为图像最大宽度除以用户的DPR。这可以防止图像显示比原始尺寸更大，并确保图像适合具有高像素密度的设备。

当然，您可能希望将此与max-width: 100％;结合使用在CSS中，以防止图像显示比其容器更大。

示例解决方案：

<!-- Width generated server-side for standard displays: -->
<img src="//picsum.photos/100" srcset="//picsum.photos/100 100w" width=100>

<!-- Width generated server-side for displays with a DPR of 2: -->
<img src="//picsum.photos/100" srcset="//picsum.photos/100 100w" width=50>

- Nathan Arthur