html - 定义没有原始大小的 srcset

Question

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

例如，我有这张图片:

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

原始尺寸为 555px。正如预期的那样，它在大于 480 像素的视口(viewport)上使用原始图像，但将其拉伸(stretch)到 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>
  <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