Picture srcset and isotope grids that change image width on click not viewport

Question

hoping someone can shed some light - I have isotoped items that have fixed column widths which are toggled not by viewport width but by user interaction.

The fixed image widths are 105px, 160px, 333px and 1200px.

I would like to use picture srcsets and get the source to update based on the images width and not the viewports. Currently i'm finding it difficult to see if there is a way to trigger this or if I should just be doing this via javascript instead.

I have the picture srcsets working fine in regards to viewport but when a column is only 105px and 5 - 12 columns of that width may fit on screen its loading in 1200px wide images due to the viewport width which isn't the functionality I'm wanting and not providing and of the savings I would hope.

I've searched up and down and can't really find much to point me in the correct direction. Any help greatly appreciated.

Answer 1

Srcset and picture element only work with resolution based media queries, or simple 1x, 2x etc descriptors. You can't control which src gets loaded, based on container width. You would have to use JavaScript here, or some other CSS class/method.

Answer 2

As described in the W3C Documentation regarding for responsive images and srcset in particular, all the considerations are done in a similar fashion to media queries, which are based on the viewport width only.