[css-images] Add `object-fit: stretch` to force SVGs to stretch without keeping their aspect ratio?

[benface]

Not sure if this is the right place for this question/issue, but I can't for the life of me manage to stretch an img with no regard for its aspect ratio if the src is an SVG. All browsers have this behavior, not sure if it's specified somewhere?

Codepen here

[cdoublev]

Try removing the viewBox from the svg. This is probably specified in the SVG spec.

[cdoublev]

Or here: https://drafts.csswg.org/css-images-3/#natural-dimensions

[benface]

Try removing the viewBox from the svg.

Huh, that works. To be honest, I didn't even know it was valid to have a SVG without a viewBox. I guess there's an implicit viewbox based on the coordinates of the elements in the SVG or something? Anyway, I still think it's very strange that the consumer of an image – who may not have any control over the image file – cannot size it the way they want in CSS. I feel like there should be a way to stretch any image regardless of their format, even if (for webcompat reasons) it requires a new value (e.g. object-fit: stretch) and object-fit: fill keeps behaving inconsistently.

[cdoublev]

If you add style="background-color: red" on the <svg>, you will see that it is stretched. You cannot stretch the content defined by its view box though.

[svgeesus]

You cannot stretch the content defined by its view box though.

Unless you put preserveAspectRatio="none"

[benface]

Ah, interesting. But do you agree that it would be nice to have control over this in CSS?

[cdoublev]

If there was a way to pass CSS styles to an external SVG embedded in <img> (see #8634), and if preserver-aspect-ratio was a presentation attribute that you can declare in CSS, I think it would be possible.

[tabatkins]

Yeah, the issue here is that object-fit handles how the image determines its concrete object size; it's then the image's own responsibility to fill that box. Raster images just stretch into that box, but SVGs can do an additional pass of aspect ratio handling.

Fixing that would require passing styling information down into the embedded document, which isn't possible right now. (A number of other properties would be useful to set if it was possible.)