html - 媒体选择器在图片 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>

出于某种原因，无论我的浏览器宽度如何，都只会执行回退，因为图片宽度设置为它的公式。

我正在使用图片填充来启用跨浏览器兼容性。如果重要的话，这是具有类“col-md-6 col-lg-7”的 bootstrap-3-column 的一部分。我的逻辑错误在哪里？

Answer 1

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