html - 带条件的Html图片媒体查询

Question

我想让我的图像使用图片配置以这样的方式显示

屏幕尺寸	图片
（最大宽度：300 像素）	小图像
（（最小宽度：301px）和（最大宽度：400px））	大图
（（最小宽度：401px）和（最大宽度：500px））	小图像
（最小宽度：501px）	大图

但我只是无法让它工作。

这个JS fiddle是我已经尝试过的一个例子。

但基本上这是我尝试过的：

<picture>
  <source media="(max-width: 300px)" srcset="....">
  <source media="((min-width: 301px) and (max-width:400px))" srcset="....">
  <source media="((min-width: 401px) and (max-width:500px))" srcset="....">
  <source media="(min-width: 501px)" srcset="....">
  <img src="...." alt="XYZ" style="width:250px">
</picture>

每次我点击外部断点时，图像都是正确的，但似乎它忽略了内部断点。

是否可以在图片上进行这种类型的媒体查询？

标签： htmlcss