Our image scales are confusing

Development
1

Finally we ended up he having 3 scale types in our image scaling module:

  • scale (former aka keep, thumbnail)
  • cover (former aka scale-crop-to-fill, up)
  • contain (former aka scale-crop-to-fit, down

Our description from the docstring is:

  • scale: Scales to the requested dimensions without cropping. The resulting image may have a different size than requested. This option requires both, width and height, to be specified. Does not scale up.
  • cover: "Scales the relatively largest dimension up to the required size. Despite the alternative spelling, I see no cropping happening."
  • contain: "Starts by scaling the relatively smallest dimension to the required size and crops the other dimension if needed."

Now, compare this to the css-backgroundsize.

  • cover: Scales the image (while preserving its ratio) to the smallest possible size to fill the container (that is: both its height and width completely cover the container), leaving no empty space. [...]
  • contain: Scales the image as large as possible within its container without cropping or stretching the image. [...]

As you see it is used the opposite in CSS. IMO our definition is confusing and the CSS one is fine. Ours is semantically wrong. Should we better fix this?

2

Slightly off topic, but it is possible to use the same for images (not background size) by using CSS's object-fit. I prefer this, since one does not need to 'change html'.

UPDATE: I wanted to mention this, since it can be used as an alternative way of using scales (by cropping them in CSS instead, which is often useful when making responsive design)