[csswg-drafts] [css-values] Retrieve intrinsic/natural size of resources (#13476)

Crissov has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-values] Retrieve intrinsic/natural size of resources ==
The addition of `calc-size()` was primarily motivated by transitions #646, but it can be useful in other scenarios as well.

<details>
<summary>Productions</summary>

~~~~ ebnf
<calc-size()> = calc-size( <calc-size-basis>, <calc-sum> )
<calc-size-basis> = <size-keyword> | <calc-size()> | any | <calc-sum>
~~~~
or, with restriction from prose, more like:
~~~~ ebnf
<calc-size()> = calc-size( [ any, <calc-sum> ]
         | [ <calc-size-basis>, [ <calc-sum> | size ] ]
)
<calc-size-basis> = <size-keyword> | <calc-size()> | <calc-sum>
~~~~
with approximately
~~~~ ebnf
<size-keyword> ≈ auto | min-content | max-content
# for width, height, min-width, min-height, max-width, max-height
# and block-size, inline-size, min-block-size, min-inline-size, max-block-size, max-inline-size
               | stretch | fit-content | contain
# from CSS Box Sizing Level 4
               | content
# for flex-basis
~~~~

</details>

This function refers to the [intrinsic size](https://drafts.csswg.org/css-sizing/#intrinsic-size) of the relevant box of the current element as determined by `box-sizing`. Sometimes, authors want to size a box to fit something else, e.g. the native dimensions of a raster image or video file (likely used in one of its backgrounds or as element content somewhere near). For the size of another element’s box, there already is [`anchor-size()`](https://drafts.csswg.org/css-anchor-position/#anchor-size-fn).

I think it should be possible to retrieve the natural size of a graphical resource, at least of those used by the host document or the stylesheet already. I’m not sure whether a) `calc-size()` or `<calc-size-basis>` should be extended to accept either `<image>` or `<url>` (since gradients do not have a natural size), or if b) this should be handled by a new function `image-size()`, simply `size()` or separate `width()` and `height()`.
In the former case a), instead of arbitrary URLs, keywords could be added instead to refer to backgrounds, fills, masks etc. 
In either case, perhaps `<basic-shape>` could also be accepted, although many shapes have a _relative_ intrinsic size. 

~~~~ css
.icon {
  background: src(bg.png) no-repeat content-box;
  box-sizing: content-box;

  size: image-size(src(bg.png));
/* or */
  width: calc-size(src(bg.png), size);
  height: calc-size(src(bg.png), size);
}
video {
  aspect-ratio: 16/9;
  min-width: width(attr(poster type(<url>)));
  min-height: height(attr(poster type(<url>)));
}
~~~~

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/13476 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Tuesday, 10 February 2026 18:28:37 UTC