<picture> <source> 尺寸的 CSS 自定义属性（变量）

Question

我正在尝试使用sizes 属性向浏览器最好地描述要从srcset 列表中选择哪个图像。

基本是：

<picture>
  <source 
    type="image/jpeg" 
    media="(min-width: 1024px)" 
    srcset="a.jpg 1024w, b.jpg 1200w, c.jpg 2048w, d.jpg 2400w" 
    sizes="100vw"
  >
  <img src="e.jpg">
</picture>

现在您可能有一个“最大视口”，此时您的网页“停止增长”，因此您可以添加一个适合您大小的媒体查询：

<source
  ...
  sizes="(min-width: 1200px) 1200px, 100vw"
>

您的图像也可能有一些填充，因此您可能会想使用98vw 而不是100vw，但如果填充以像素为单位，这并不总是准确的，所以您可以使用@987654327 代替它@：

<source
  ...
  sizes="(min-width: 1200px) 1200px, calc(100vw - 20px)"
>

到目前为止，我们只使用 absolute 单位，但我了解到您也可以使用 context-dependent 单位，例如 em:

<source
  ...
  sizes="(min-width: 1200px) 1200px, calc(100vw - 2em)"
>

有趣的是，这意味着浏览器必须知道应用于图像的样式（因为em 可以根据 CSS 进行更改）。因此，如果这是真的，您可以在您的尺寸中使用 CSS 自定义属性（或“CSS 变量”）吗？

<source
  ...
  sizes="(min-width: 1200px) 1200px, calc(var(--six-columns) - var(--image-padding))"
>

谢谢！

---

作为一个额外的问题：知道在哪里可以找到浏览器支持这样的事情吗？

Answer 1

答案是否定的！

当在em 属性中使用em 作为单位时，浏览器将使用固定的预定大小（显然在 chrome 中为 14px，实验确定）。

最后，没有任何信息实际上来自 CSS，而且 CSS 自定义属性实际上并不能以这种方式使用。