我可以对图像尺寸而不是视口尺寸使用`< img srcset>`或`< picture>`吗? [英] Can I use `<img srcset>` or `<picture>` for image size rather than viewport size?

问题描述

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

I'm trying to use <img srcset /> to load images based on the size they'll appear on the page, rather than based on the size of the viewport. Perhaps examples will help:

• 在任何视口上，当在200px宽的< div> 内的 img-200.jpg 应该加载.
• 在任何视口上，当在 400px 宽< div> ， img-400.jpg 应该会加载.
• ...等等.

• On any viewport, when the image is styled with width: 100% inside a 200px-wide <div>, img-200.jpg should load.
• On any viewport, when the image is styled with width: 100% inside a 400px-wide <div>, img-400.jpg should load.
• ...etc.

我已经完成了大量的谷歌搜索，但据我所知， srcset 仅用于根据 viewport 大小更改图像，而不是 image大小(如果可以的话).那是对的吗?还是我希望实现的目标充满希望?

I've done tons of Googling, but as best as I can tell, srcset is only used for changing images based on viewport size, not image size, if that makes sense. Is that correct? Or is there hope for what I'm trying to accomplish?

推荐答案

正如评论中提到的那样，这还不存在.
但是，我一直在想.如果您不介意一些小窍门，那么可以采取一种解决方法.
我们可以使用iframe.

As was mentioned in the comments, this doesn't exist yet.
However, I've been thinking. If you don't mind a little trickery, there's a workaround.
We can use an iframe.

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

To the contents of an iframe, its width is the viewport. So then we can use the standard srcset tricks.

我们的img看起来像这样

Let's say our img looks like this

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

以较小的分辨率(200像素或更小)使用200x100的图像，以较高的分辨率使用500x250的图像.
然后，我们可以将其放到一个HTML文件中，并在其周围加上零边距，因为iframe需要一个实际的HTML文档.

using the 200x100 image at smaller resolutions (200px or less) and the 500x250 one at higher resolutions.
We can then put this in a HTML file with a zero margin around it, because the iframe expects an actual HTML document.

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

Now to avoid having to load multiple files, we can turn this into a data URL, which will look as follows:

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宽度不同.

and all that will make our original HTML page look something like this.
Note that, to show it works, I included two iframes, which are identical in themselves. Only their CSS widths differ.

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>`吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！