具有`srcset`属性的自动宽度图像

Question

假设我有以下图片：

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

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

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

我希望这张图片在普通显示器上默认为 100 像素，在 2 倍（视网膜）显示器上默认为 50 像素。

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

我需要这种行为的原因是因为在我的系统中，用户可以上传任何大小的图像并将它们放在页面上，并且我正在生成一个srcset，其中包含多个步骤，直到图像的最大大小，在给定图像大小和用户屏幕像素密度的情况下，我需要一种方法让图像以正确的宽度显示。

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

在我的研究中，我发现this article 直接解决了这个问题。作者建议将width 属性添加到图像的最大尺寸，以将sizes 属性的作用还原为图像的固有尺寸。但是，他没有说明如何在不同的像素密度下进行这项工作。

Answer 1

不幸的是，考虑到 DPR，似乎没有办法让srcset 默认为自然大小的图像。 sizes 属性，如果没有在带有srcset 的图像上设置，则默认为100vw，它重新定义了图像的固有宽度，并且似乎没有办法在不自己提供明确宽度的情况下重置它。

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

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

示例解决方案：

<!-- 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>