Chrome problem with min-aspect-ratio CSS

Development Web Development
1

Hi!
I recently implemented following responsive image optimization for images that are displayed with object-fit: contain CSS style.
This essentially tells the browser to download the closest image that can fit in the viewport with minimal resize. And it works regardless of both image and viewport aspect ratio.
Pretty clever trick to reduce page size and loading time.

<img src="https://my-domain.com/media/work_300.webp"
	sizes="(min-aspect-ratio: 1.4/1) 140vh, 100vw"
	srcset="
			https://my-domain.com/media/work_300.webp 300w,
			https://my-domain.com/media/work_400.webp 400w,
			...
			https://my-domain.com/media/work_2560.webp 2560w,
			https://my-domain.com/media/work_3000.webp 3000w"
	alt="" class="object-fit-contain">

I based it on solution found here:

But I found a problem. As far as I tested - this code only works on Firefox and it’s forks!

I can’t get this to work on any chromium based browser, and don’t know why. I suspect that the problematic part is sizes="(min-aspect-ratio: 1.4/1) 140vh, 100vw" but srcset, sizes and aspect-ratio are all implemented in chrome as far as https://caniuse.com/ can tell.

Does anyone knows why this is happening?

2

If I’m not mistaken, this code should be part of a < picture > element? From that example

          <picture>
            <img src="giraffe.jpg" alt="A giraffe."
                 srcset="[email protected]   1.5x,
                         [email protected]       2x,
                         [email protected]   2.5x,
                         [email protected]       3x,
                         [email protected]   3.5x,
                         [email protected]       4x,
                         [email protected]   4.5x,
                         [email protected]       5x"
                 height="400" width="300"/>
          </picture>
3

Thanks for the tip. Checked it and it’s not the issue.

Either with or without <picture> wrapper this don’t work on chrome, while on FF its fine.

4

OK. I figured it out.
Short answer Chrome is el garbagio. It turns out it cannot read floats inside aspect ratio.

So this is valid for Firefox but not Chrome:
sizes="(min-aspect-ratio: 1.4/1) 140vh, 100vw"
This is valid for both:
sizes="(min-aspect-ratio: 14/10) 140vh, 100vw"

1 Like