image - 使用 srcset 和 size 切换图片和不同的媒体查询

Question

我正在尝试将响应式图像切换到移动设备，目前我正在使用 picturefill.js 以及 srcset 和 sizes 进行切换，但是图像并没有从下面使用的代码切换。

<img srcset="/images/marketing/large.png 1190w, /images/marketing/mobile.png 320w"
 sizes="(min-width: 767px), (max-width: 768px)"
 alt="A rad wolf" 
 class="img-responsive" />

Answer 1

您的尺寸属性无效。使用 size 属性，您可以定义图像元素的显示宽度。并且您可以使用媒体条件来定义不同的断点。您仅使用媒体条件，但不添加尺寸。

例子：

sizes="(min-width: 767px) 760px, 100vw"

这意味着如果视口大于 767，则图像以 760px 显示，否则它具有完整的视口。

此外，第一个匹配的媒体条件被采用，因此您不需要混合最小宽度和最大宽度。使用最大宽度或最小宽度要容易得多。

sizes="(min-width: 980px) 980px, 100vw"

与 max-width 描述的尺寸相同：

sizes="(max-width: 980px) 100vw, 980px"

您也可以尝试使用lazySizes，它会自动为您添加尺寸。