How does 'intrinsicsize' work with 'object-fit'

[loonybear]

This concern was bought up here. Images get distorted when using object-fit.

@dvoytenko proposed a feasible solution could be forcing object-fit:contain instead of the default object-fit:fill when 'intrinsicsize' is specified.

[fantasai]

Squishing images is problematic for photographs, but it's not that crazy for vector graphics. So it's not clear to me that this would be Web-compatible.

[dvoytenko]

@fantasai to clarify:

1. The squishing would happen only if the actual size is different from declared size.
2. Hopefully, it's a default at the lowest level of specificity and can be easily changed in the stylesheet.
3. It's there to avoid stretching or otherwise deforming the image, which is arguably worse.

[fantasai]

@dvoytenko What I'm saying is that this behavior of images, that they deform when resized to a different aspect ratio, has been built into how the Web renders since the mid 1990s. While on some pages it may be an unintentional error, on others it's probably intentional. I don't think we can change this default behavior.

[dvoytenko]

@fantasai I think your comment might be more relevant for #4. If you agree, please repost there. The explainer proposes to add a new attribute intrinsicsize and derive the new behavior and default styling from it. It's defined this way to explicitly avoid backward compatibility issues. The #4 makes a case to change the current behavior and that debate is still ongoing there.

[fantasai]

@dvoytenko I'm not convinced changing object-fit based on the presence of intrinsicsize is a good idea. It's an unexpected interaction, and one more thing for authors to puzzle over...