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

【问题标题】：Can I use `<img srcset>` or `<picture>` for image size rather than viewport size?我可以使用 `<img srcset>` 或 `<picture>` 作为图像大小而不是视口大小吗？
【发布时间】：2017-12-11 10:14:34
【问题描述】：

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

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

我已经进行了大量的谷歌搜索，但据我所知，srcset 仅用于根据 viewport 大小更改图像，而不是 image 大小，如果这有意义的话。那是对的吗？或者我正在努力实现的目标有希望吗？

【问题讨论】：

您的假设是正确的 - 图形是由屏幕分辨率而不是容器大小选择的。所以这不是正确的方法。让我想想。
如何决定 div 的宽度？他们有不同的类吗？是窗口宽度的百分比吗？
@MrLister 无论它们碰巧出现在页面上的宽度如何。与其说是容器 div，不如说是图像本身有多大。我希望浏览器足够聪明地说：“如果图像根据布局和它所在的容器元素以 200 像素宽显示，请选择最适合该尺寸的图像。”
这样说，这是个好问题。事实上，很遗憾这还不存在！
在查看“尺寸”时，我感到非常失望，因为图像宽度不是决定因素。似乎是一个巨大的疏忽。在开发组件而不是页面时，我们并不总是知道我们的组件如何适合它们的父级。 size 属性可以为我解决任何问题，因为这不是我设计页面的方式 :( 加上我仍然对视网膜图像如何适应这一点感到困惑 - 我必须为相同的图像尺寸指定更多的媒体查询？至少有一个创建图像时的角度组件我已经对自己选择图像大小的上下文了解更多。

标签： css responsive-images srcset

【解决方案1】：

正如 cmets 中提到的，这还不存在。
不过，我一直在思考。如果您不介意小把戏，有一种解决方法。
我们可以使用 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>

【讨论】：

我看到这在 Chrome 上是不确定的——有时它可以工作，更多时候它为两个 iframe 使用更大的图像。尚不完全确定原因，抱歉。
显然 Chrome 会缓存最大版本的图像，并在加载后将其用于较小的视口。
那...是一个极具创新性的解决方案。哇。我会试试这个——谢谢！
这种鬼鬼祟祟的做法让我笑了 :) 我只是不相信它在实践中会很好用 :-(
您还需要注意 safari 上的 iframe。视口并不总是 iframe 的大小。我认为您需要禁用滚动