媒体选择器在图片 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 来启用跨浏览器兼容性。如果重要的话，这是带有 class "col-md-6 col-lg-7" 的 bootstrap-3 列的一部分。我的逻辑错在哪里？

Answer 1

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

媒体选择器在图片 html5 标签的尺寸属性中不起作用

Media selectors not working in sizes attribute for picture html5 tag

html

twitter-bootstrap

picturefill