视口缩小时 img srcset 不会缩小

Question

我不确定我对srcset属性的理解是否有误。

鉴于此 html

<img 
  srcset="
      /path/to/image1 343w,
      /path/to/image2 768w,
      /path/to/image3 304w" 
  sizes="
      (min-width: 0px) and (max-width: 639px) 343px,
      (min-width: 640px) and (max-width: 767px) 768px,
      (min-width: 768px) 304px"
/>

我认为一旦我缩小浏览器窗口，例如700px 宽度到 500px 宽度浏览器会将图像从/path/to/image2 切换到/path/to/image1。这不是它的工作原理吗？ 一旦我的浏览器（用 Chrome 和 Firefox 测试）加载了较大的图像，它就不会切换回较小的图像。

我的页面布局从一个断点更改为下一个断点，因此一旦视口宽度缩小，我想加载具有不同纵横比的图像。是通过Javascript做到这一点的唯一方法吗？或者我应该使用多个图像标签并为非活动媒体查询设置display: none？

Answer 1

尝试在图片的 css 中使用height: auto;。

Answer 2

看起来<picture> 元素就是我要找的。感谢@niorad。

我还发现this blog post 解释了<img> 和<picture> 之间的区别。