定义没有原始大小的 srcset

Question

有没有办法在 size 属性中不指定原始宽度的情况下将 scrset 添加到图像中？

例如，我有这张图片：

<img src="image.png" srcset="image_XXS.png 320w, image_XS.png 480w, image.png 481w" sizes="100vw">

原始大小为 555 像素。正如预期的那样，它在大于 480 像素的视口上使用原始图像，但将其拉伸到 555 像素以上。我发现如果我将原始宽度添加到 sizes 属性

<img src="image.png" srcset="image_XXS.png 320w, image_XS.png 480w, image.png 481w" sizes="(min-width: 555px) 555px, 100vw">

或者将其包裹在一个固定宽度的 div 中，它可以工作。

不知道原尺寸也可以吗？

提前致谢！

Answer 1

据我所知，您必须为此使用 Picture 元素。我一直在同一个十字路口，现在知道如何处理未知的图像尺寸。

我和你一样，是同一张图片的三个版本，调整大小为一半，然后再调整一半，所以我想根据屏幕大小使用它们，就是这样。

去这个：

<picture>
  <source media='(min-width: 1200px)' srcset='large.jpg'>
  <source media='(min-width: 768px)' srcset='medium.jpg'>
  <img src='small.jpg' alt='alternative text' />
</picture>

与img srcset支持相同：

https://caniuse.com/#search=picture