[csswg-drafts] [css-content] Allow for styling of generated content images (#10471)

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

== [css-content] Allow for styling of generated content images ==
Currently, if you add an image like this:

```
.navi a:before {
 content: url(logo.svg);
}
```

…there's basically no way to control the dimensions (among other things) of that inserted image. The only way I know at all is to apply something like `display:block; transform:scale(.5)`. Downside being that the size of the element stays the same, as is always the case with transformations.

The reason usually given is that you're actually controlling the "box" that's inserted and not the actual image. Fair enough, but that got me thinking. At some point `display:contents` was introduced which supposedly makes the browser behave as if that element didn't exist and renders its content directly.

Doesn't that sound like that should give you control over the generated image, if you use those 2 in combination? Like:

```
.navi a:before {
 content: url(logo.svg);  /* insert the image */
 display: contents;       /* remove the bounding box & allow direct control of image */
 object-fit: contain;     /* set new dimensions for the image somehow */
}
```

Unfortunately, this doesn't work. Shouldn't it though?

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


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

Received on Wednesday, 19 June 2024 20:25:56 UTC