[css-images] object-fit: scale-down should become a flag · Issue #1578 · w3c/csswg-drafts (original) (raw)

Spec: https://drafts.csswg.org/css-images-3/#the-object-fit

Currently, scale-down is defined as a separate value:

scale-down
Size the content as if none or contain were specified, whichever would result in a smaller concrete object size.

The choice of making this mean "contain or none" instead of "cover or none" is rather arbitrary and non-obvious. Furthermore, the "cover or none" use case is more common, since there is a ton of images on the web that are cropped to a square or other limited rectangle and typically you want them to cover the entire area UNLESS that would mean scaling them down, which is an absolute no-no.

For example, take a look at this:

image

This is currently using object-fit: cover, which causes the last image to be horribly enlarged, since it's just a favicon. Using object-fit: scale-down would fix the last image, but break the others. There is currently no value for object-fit that fixes this.

Therefore, I would suggest changing the grammar from fill | contain | cover | none | scale-down to fill | none | [contain | cover] || scale-down and scale-down on its own would be defined as equivalent to contain scale-down for backwards compat.

CC @tabatkins @fantasai