Question

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

例如，我有这张图片：

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

原始尺寸为555像素。它使用宽度大于480px的视口上的原始图像，如预期的那样，但将其拉伸到555px以上。我发现如果我将原始宽度添加到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

定义没有原始大小的srcset

1 个答案: