媒体选择器在图片html5标记的大小属性中不起作用

Question

我正在尝试使用新的图片标签来获得我的图片的响应版本。

<picture>
  <source sizes="(min-width: 1320px) calc((100vw - 30px)/12*7 - 30px,
                 (min-width: 1091px) calc((100vw - 30px)/2 - 30px),
                 calc(100vw - 75px)"
          srcset="public/img/TSM/16_128.png 128w,     
                  public/img/TSM/16_256.png 256w,
                  public/img/TSM/16_1024.png 1024w">
    <img src="public/img/TSM/16_1024.png">
</picture>

出于某种原因，无论我的浏览器宽度是多少，都只执行回退，因为图片宽度设置为其公式。

我正在使用picturefill来启用跨浏览器兼容性。如果重要的话，这是类为"col-md-6 col-lg-7"的引导程序3列的一部分。我的逻辑错误在哪里？

Answer 1

您的第一个calc缺少一个)，这使得属性值的其余部分也无效，您将获得默认的100vw。检查https://validator.nu/：-）