how to provide sizes in image-set similar to sizes in srcset?

Question

We are using the background-image style for one component in our application. we need to make it responsive with different resolution images. I have seen that we can make use of image-set to achieve it and implemented it as below and working as expected. Please see the below code snippet I have implemented.

<div style="width: 50%;height: 50%;background-repeat: no-repeat; background-image: -webkit-image-set(
        url(smallCat.jpg) 1x,
        url(BigCat.jpg) 2x)">
</div>

Now, I would like to give a specific resolution of the screen in place of 1x,2x. Since it is possible in srcset with sizes, do we have any way to set sizes for image-set? Please let me know your thoughts.

Thanks.

Answer 1

Nah, there is no syntax for this. But:

Another difference, is that unlike with the srcset attribute, where you can also give image options based on the width of the browser (when art direction is required), you cannot do that with the image-set. However, art direction can still be achieved in CSS using media queries!

Source: Creating responsive images with image-set

So, if you want to rule all the images using CSS only, use media queries.