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

Question

我将 picturefill.js 用于响应式图像功能。当我在未指定高度和宽度的情况下放置原始图像时，图像会显示在<picture>标签中，并根据屏幕尺寸拉出不同尺寸的相同图像。

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

这是链接

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="…">

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

从网站：

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