具有 srcset 属性的自动宽度图像
Auto-width image with `srcset` attribute
假设我有以下图像：
<img src="//picsum.photos/100" srcset="//picsum.photos/100 100w">
似乎我没有包含的 sizes 属性默认为 100vw，因此小图像被放大到视口的宽度。
如果我不想要这种行为，而是希望图像默认为其固有大小，我该怎么办？
我希望这张图片在普通显示器上默认宽度为 100 像素，在 2x（视网膜）显示器上默认为 50 像素。
如果我指定 100px 我自己的 sizes 属性，这不能解决在视网膜显示器上显示在 50px 的问题。
我需要这种行为的原因是因为在我的系统中，用户可以上传任何大小的图像并将它们放在页面上，我正在生成一个 srcset 具有多个步骤的最大尺寸他们的图像，我需要一种方法让图像在给定图像大小和用户屏幕的像素密度的情况下以正确的宽度显示。
是否可以使用 srcset 实现自动宽度图像的这种行为？
在我的研究中，我发现 this article 直接解决了这个问题。作者建议添加具有图像最大尺寸的 width 属性，以恢复 sizes 属性对图像固有尺寸的作用。但是，他没有说明如何使用不同的像素密度进行这项工作。
不幸的是，考虑到 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>
假设我有以下图像：
<img src="//picsum.photos/100" srcset="//picsum.photos/100 100w">
似乎我没有包含的 sizes 属性默认为 100vw，因此小图像被放大到视口的宽度。
如果我不想要这种行为，而是希望图像默认为其固有大小，我该怎么办？
我希望这张图片在普通显示器上默认宽度为 100 像素，在 2x（视网膜）显示器上默认为 50 像素。
如果我指定 100px 我自己的 sizes 属性，这不能解决在视网膜显示器上显示在 50px 的问题。
我需要这种行为的原因是因为在我的系统中，用户可以上传任何大小的图像并将它们放在页面上，我正在生成一个 srcset 具有多个步骤的最大尺寸他们的图像，我需要一种方法让图像在给定图像大小和用户屏幕的像素密度的情况下以正确的宽度显示。
是否可以使用 srcset 实现自动宽度图像的这种行为？
在我的研究中，我发现 this article 直接解决了这个问题。作者建议添加具有图像最大尺寸的 width 属性，以恢复 sizes 属性对图像固有尺寸的作用。但是，他没有说明如何使用不同的像素密度进行这项工作。
不幸的是，考虑到 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>