使用srcset和size来切换图像和不同的媒体查询

Question

当我使用picturefill.js以及srcset和尺寸进行切换时，我正在尝试切换响应式图像，当时我正在使用图像切换，但是图像不会从下面使用的代码切换。

<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

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

示例：

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

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

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

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

使用max-width描述的相同尺寸：

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

您还可以尝试使用lazySizes自动为您添加尺寸。