CSS <picture> <source> 大小的自定义属性（变量）

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，但是如果填充以像素为单位，那并不总是准确的，所以您可以而是使用 calc:

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

到目前为止，我们只使用了绝对单位，但我了解到您也可以使用 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

答案是否定的！

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

最后，CSS 并没有真正的信息，而且 CSS 自定义属性实际上不能那样使用。

CSS <picture> <source> 大小的自定义属性（变量）

CSS custom properties (variables) in <picture> <source> sizes

html

css

image

responsive-design

css-variables