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

Question

假设我有以下图像：

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

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

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

我预计该图像在普通显示器上的宽度默认为 100px，在 2x（视网膜）显示器上的宽度默认为 50px。

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

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

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

在我的研究中，我发现这篇文章直接解决了这个问题。作者建议添加width具有图像最大尺寸的属性，以恢复该sizes属性对图像固有尺寸的作用。然而，他没有说明如何在不同的像素密度下实现这一点。

Answer 1

srcset不幸的是，考虑到 DPR，似乎没有办法让图像默认为自然尺寸。该sizes属性默认为（100vw如果未在图像上设置）srcset，则重新定义图像的固有宽度，并且如果您自己不提供显式宽度，则似乎没有办法重置它。

在我的具体情况下，我发现我们已经将用户的 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>