Css 我可以使用`<；img srcset>；`或`<；图片>；`用于图像大小而不是视口大小？

我试图使用

根据图像在页面上显示的大小而不是视口的大小来加载图像。举例或许有助于：

• 在任何视口中，当图像在200px宽的
  内使用

  宽度：100%

  设置样式时，应加载

  img-200.jpg

• 在任何视口中，当图像在400px宽的
  内使用

  宽度：100%

  设置样式时，应加载

  img-400.jpg

• ……等等

---

我已经用谷歌搜索了很多次，但我能说的最好的是，

srcset

仅用于根据视口大小而不是图像大小来更改图像，如果这有意义的话。对吗？或者我想要实现的目标还有希望吗？

正如评论中提到的，这还不存在。
然而，我一直在想。如果你不介意耍点小把戏，这里有一个解决办法。
我们可以使用iframe

对于iframe的内容，其宽度为视口。所以我们可以使用标准的srcset技巧

假设我们的img是这样的

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

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

数据：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{宽度：200px；高度：100px}
iframe~iframe{宽度：400px；高度：200px}

？



？

您的假设是正确的-图形是根据屏幕分辨率而不是容器大小选择的。所以这不是正确的方法。让我想一想，如何决定div的宽度？它们是否有不同的类，是否是窗口宽度的百分比等？@MrLister只是它们出现在页面上的任意宽度。与其说是容器div，不如说是图像本身有多大。我希望浏览器能够足够聪明地说，“如果基于布局和容器元素，图像以200px的宽度显示，请选择适合该大小的最佳图像。”这样的措辞，这是一个好问题。事实上，很遗憾这还不存在！当我看到“尺寸”时，我非常失望，因为图像宽度不是决定因素。似乎是一个巨大的疏忽。当开发组件而不是页面时，我们并不总是知道我们的组件将如何适应它们的父级。sizes属性do any for me可解决任何问题，因为这不是我设计页面的方式：（另外，我仍然不清楚视网膜图像如何适应这种情况-我必须为相同的图像大小指定更多的媒体查询？至少在创建图像时，我已经知道了很多关于选择图像大小的上下文的信息。我发现这在Chrome上是不确定的-有时它可以工作，更经常地使用lar两个iFrame的ger图像。还不完全确定原因，抱歉。显然Chrome缓存了图像的最大版本，并在加载后将其用于较小的视口。这……是一个非常创新的解决方案。哇。我会尝试一下的，谢谢！这让我笑了：）我只是不相信它会在实践中很好地工作，但是：-（你还需要注意safari上的iframe。视口并不总是iframe的大小。我认为你需要禁用滚动