Question

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

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

我已经完成了大量的谷歌搜索，但据我所知，srcset仅用于根据视口大小更改图像，而不是图像大小，如果这是有道理的。那是对的吗？或者是否有希望实现我想要实现的目标？

Answer 1

正如评论中所提到的，这还不存在但是，我一直在想。如果你不介意一点点诡计，那就有一个解决方法我们可以使用iframe。

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

让我们说我们的img看起来像这样

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

使用较小分辨率（200px或更低）的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宽度不同。

＆＃13;

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

＆＃13;

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

＆＃13;

我可以使用“<img srcset=""/>”或“<picture>”来表示图像大小而不是视口大小吗？

1 个答案: