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”类的bootstrap-3列的一部分。我逻辑中的错误在哪里？

Answer 1

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

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

1 个答案: