[csswg-drafts] [css-images] object-fit: scale-down should become a flag

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

== [css-images] object-fit: scale-down should become a flag ==
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](https://user-images.githubusercontent.com/175836/27774886-e1239992-5f68-11e7-8731-27b2a66b0bf8.png)

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 

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

Received on Monday, 3 July 2017 01:10:44 UTC