Responsive image width not rendered as expected

The CMS Questions
1

I am trying to get my head around responsive images.
I follow this description: https://getkirby.com/docs/cookbook/performance/responsive-images
And I am working with the UI-Kit Framework.

I don’t get the expected widths. I have a case with an image gallery where all images are set to cover its container. And because I have landscape images, they are scaled up to the container’s height.
The calculations in your examples consider the width of images and therefore in my case result in wrong srcsets, I think.

My img-tag:

<img
            alt="<?= $image->alt() ?>"
            src="<?= $image->resize(1000)->url() ?>"
            srcset="<?= $image->srcset([
                '400w'  => ['width' => 400, 'quality' => 80],
                '600w'  => ['width' => 600, 'quality' => 80],
                '1000w' => ['width' => 1000, 'quality' => 80],
                '1400w' => ['width' => 1400, 'quality' => 80],
                '1800w' => ['width' => 1800, 'quality' => 80]
            ]) ?>"     
            uk-cover>

When i.e. my viewport is 700 width, my images are rendered as 1400. Going under 590 width my images are rendered as 1000. So a little weird, jumping over one of the srcset or switching at a not-given width value.

Can somebody give me a hint? Has it something to do with the order or maybe some other css is in conflict?

thankyou.

2

Given that you most probably have a device pixel ration of 2x, the sizes seem right to me.

3

Oh my… that was the issue.
I didn’t know that my browsers had 2x as a default.

You made my sunday evening.