html - 多列中的 srcset 根本不起作用，任何让它选择最佳图像的方法

Question

您好，我使用以下 CSS 代码实现了多列布局

.grid {
  column-width:260px;
  column-fill:balance;
}

然后我有一个使用 srcset 指定 3 个图像变体的图像标签

<img srcset="thumb.jpg  320w, med.jpg 480w, large.jpg 640w" 
  sizes="(max-width:320px) 320px, (max-width:480px) 480px, 640px"
  src="thumb.jpg">

如果它在像移动 View 这样的小查看器中工作正常，但在使用列时在全屏布局中不起作用。 srcset 似乎无法识别列宽限制。

我从没想过我会这么说，但它在 IE11 中工作正常，IE11 显示图像的缩略图版本，而 Firefox 和 Chrome 显示大版本而幸福地没有意识到列宽限制!

有没有办法通过在图像周围添加包装或其他东西或其他一些技巧来强制调整大小。还有关于将来是否支持的任何信息..感谢任何帮助!

Answer 1

我发现使用 <picture>标签最适合这样的事情。

<picture>
  <source media="(max-width: 320px)" srcset="https://placehold.it/50x50">
  <source media="(max-width: 480px)" srcset="https://placehold.it/150x150">
  <img src="https://placehold.it/250x250" />
</picture>