定义没有原始大小的 srcset

Question

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

例如，我有这张图片：

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

原尺寸为555px。正如预期的那样，它在大于 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>
  <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

定义没有原始大小的 srcset

Defining srcset without original size

html

image

srcset