我可以使用 `<img srcset>` 或 `<picture>` 作为图像大小而不是视口大小吗？

Question

我正在尝试使用 <img srcset /> 根据图像在页面上显示的大小而不是视口的大小来加载图像。也许示例会有所帮助：

在任何视口上，当图像在 200 像素宽 <div> 内使用 width: 100% 设置样式时，应该加载 img-200.jpg。
在任何视口上，当图像在 400px 宽 <div> 内使用 width: 100% 设置样式时，应该加载 img-400.jpg。
...等等

我已经进行了大量的谷歌搜索，但据我所知，srcset 仅用于根据 viewport 大小更改图像，而不是 image 大小，如果有意义的话。那是对的吗？或者我想要完成的事情有希望吗？

Answer 1

正如评论中提到的，这还不存在。
不过，我一直在想。如果您不介意耍点小花招，这里有一个解决方法。
我们可以使用 iframe。

对于 iframe 的内容，它的宽度就是视口。那么我们就可以使用标准的 srcset 技巧了。

假设我们的 img 看起来像这样

<img src="https://placehold.it/200x100" alt=""
  srcset="https://placehold.it/200x100 200w, https://placehold.it/500x250 500w">

使用较小分辨率（200 像素或更小）的 200x100 图片和更高分辨率的 500x250 图片。
然后我们可以将它放在一个 HTML 文件中，周围的边距为零，因为 iframe 需要一个实际的 HTML 文档。

现在为了避免加载多个文件，我们可以将其转换为数据 URL，如下所示：

data:text/html;charset=utf-8,%3Cbody style='margin%3A0'%3E%3Cimg src='https%3A//placehold.it/200x100' srcset='https%3A//placehold.it/200x100 200w, https%3A//placehold.it/500x250 500w

所有这些将使我们的原始 HTML 页面看起来像这样。
请注意，为了证明它有效，我包含了两个 iframe，它们本身是相同的。只有它们的 CSS 宽度不同。

iframe {width:200px; height:100px}
iframe ~ iframe {width:400px; height:200px}

<iframe src="data:text/html;charset=utf-8,%3Cbody style='margin%3A0'%3E%3Cimg src='https%3A//placehold.it/200x100' srcset='https%3A//placehold.it/200x100 200w, https%3A//placehold.it/500x250 500w' alt=''%3E" frameborder="0">?</iframe>
<br><br>
<iframe src="data:text/html;charset=utf-8,%3Cbody style='margin%3A0'%3E%3Cimg src='https%3A//placehold.it/200x100' srcset='https%3A//placehold.it/200x100 200w, https%3A//placehold.it/500x250 500w' alt=''%3E" frameborder="0">?</iframe>

我可以使用 `<img srcset>` 或 `<picture>` 作为图像大小而不是视口大小吗？

Can I use `<img srcset>` or `<picture>` for image size rather than viewport size?

css

responsive-images

srcset