img sizes="auto" skewing images using object-fit: contain about html HOT 8 OPEN

@eeeps with https://codepen.io/eeeps/pen/qBvmvwE I see stretched images in Chrome Canary 121 (I got an error with updating it seems), but resizing the window made the image switch to correct aspect ratio.

I downloaded a new Chrome Canary, which was version 122 (still an error with updating), and now the image is not stretched. So maybe it was a bug that was fixed after 121?

from html.

@joemcgill

Adding the following CSS to the stylesheet fixes the issue for me:

If you also remove display: flex from the parent, the images disappear. That was the original problem that contain-intrinsic-size in the UA stylesheet was intended to solve. See #9448 (comment)

from html.

As I understand it, the problem here is that the object-fit spec calls for contain and cover to look at the element’s natural aspect ratio.

Authors should be able to set this intrinsic size with contain-intrinsic-size but there appears to be a Chrome bug preventing this from working, currently.

Once the Chrome bug is fixed, this should be work-around-able. However: would it be web compatible to have the <img width height> attributes set the natural size of the <img> in the same way that they do, for <video>, which does not suffer from this problem? https://codepen.io/eeeps/pen/bGZWZBq

from html.

Actually this does appear to be fixable with contain-intrinsic-size? I swear it wasn't an hour ago, but perhaps I just made a typo? https://codepen.io/eeeps/pen/qBvmvwE

The codepen I linked above (https://codepen.io/eeeps/pen/bGZWZBq) is also working "properly" for me now. An hour ago the first dog face (in the <img>) was squished to 2:1 within its 1:1.5 box, I promise! It had large green letterbox bars; I should have taken a screenshot.

from html.

Hmmm, I wonder if we should have width and height attributes, if both are set (on img or the selected source), be a presentational hint to contain-intrinsic-size? Or should object-fit work differently?

@LeaVerou @tabatkins @fantasai any advice, as editors of css-images?

cc @whatwg/css @progers @tcaptan-cr

from html.

Hmmm, I wonder if we should have width and height attributes, if both are set (on img or the selected source), be a presentational hint to contain-intrinsic-size?

@progers @tcaptan-cr I see auto-sizes was unshipped in Chromium because of this issue (based on the referenced bugs), but the sites in question apparently don't have width/height attributes.

We could make auto-sizes do nothing if the img doesn't have both width and height attributes, in addition to the preshint fix. I think that would address the web compat issue.

from html.

In my original example test case, it does look like the UA stylesheet was being applied and causing this issue, even though in my case the image markup does include width and height attributes. Adding the following CSS to the stylesheet fixes the issue for me:

img:is([sizes="auto" i], [sizes^="auto," i]) {
    contain-intrinsic-size: auto none;
}

It makes me wonder if the UA stylesheet is being applied too broadly here.

from html.

Thanks for the context, @zcorpan. I guess the thing that is unclear to me is that even in @eeeps comment that you linked to, he specifically references images without height and width, whereas the UA stylesheet applies regardless of whether the dimension attributes are present.

from html.