响应式图像映射不适用于缩放图像

Question

我使用picturefill.js来获取响应式图像功能。当我放置原始图像而没有指定高度和宽度时，图像显示在<picture>标签中，并根据屏幕尺寸拉出不同尺寸的相同图像。

但是当我指定高度和宽度时，响应功能不起作用。图片加载了<img>标记。

here is link

Answer 1

该库的文档说明您应使用sizes标记来管理图像大小：

<img
  sizes="(min-width: 40em) 80vw, 100vw"
  srcset="examples/images/medium.jpg 375w,
          examples/images/large.jpg 480w,
          examples/images/extralarge.jpg 768w"
  alt="…">

通过定义宽度和高度的样式，您将强制图像保持该方面。

来自网站：

sizes语法用于定义图像在布局中占用的空间。然后srcset定义图像列表及其固有宽度。这允许浏览器为布局的该部分中可用的大小选择最小的适当源，而不仅仅是视口大小。