[csswg-drafts] [css-images] object-fit setting for integer-multiple (#5967)

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

== [css-images] object-fit setting for integer-multiple ==
I made a comment in [this thread](https://github.com/w3c/csswg-drafts/issues/5837#issuecomment-776245187) and it was recommended I make a new proposal here.


For images with image-rendering:pixelated if the image display size dimensions aren't integer multiples of the underlying bitmap, you can get some nasty artefacts, because the rectangles representing these pixels can be different sizes.

See these images from the original thread:

![](https://user-images.githubusercontent.com/6083021/103712967-f9739d80-4f6f-11eb-9f5c-cc1c56f2cae7.png)


![](https://user-images.githubusercontent.com/465632/107427805-10368280-6b22-11eb-90f2-b4caca2697e9.png)

(cf increpare/PuzzleScript#568 )

[If you have a desktop pc with non-integral devicePixelRatio you can repro it yourself here https://www.puzzlescript.net/play.html?p=fd4e3445b63068676f72 by resizing the window down]

You can see some horizontal lines like on the "S" of "simple block pushing game" are thick, while the "start game" lines are thin, even though both are one pixel high.

Because Window.devicePixelRatio doesn't have to be an integer, this can end up becoming a ferociously difficult problem to solve, so it seems something worth suggesting at the spec level. 

A poster on the original thread [suggested the following](https://github.com/w3c/csswg-drafts/issues/5837#issuecomment-776296281):

> [That] is probably a good fit for an object-fit value, probably as a modifier alongside cover/contain. Then you could apply object-position: center to position it as you described. 

I guess my proposal would this:

For an 'integer-multiple-contain' object-fit property that would, given an image of width WxH, find the largest integer-multiple scaling of the image (not at the logical-pixel level, but at the render-pixel level) that nonetheless would fit inside the content box.  

Edge case behaviour:

* the image is larger than the render-pixel dimensions of the content box, I would say to crop it at a 1:1 render-pixel scaling. (I have no idea really what to suggest here, I'd be ok with a fall back to normie 'contain' also in this case)

Other considerations: wouldn't one want a similar behaviour for cover as well?  integer-multiple-cover?  Maybe theoretically, but I don't think it's likely to be as much a thing that people would want.

(Please excuse any errors/misconceptions in this post - I'm new here - and correct me if I've stuffed something up :) )

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


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Tuesday, 9 February 2021 23:48:43 UTC