Responsive images in own themes

I’m working on a new WP site, which is still on my local Dev server. Since I never liked the way, official themes handled in-text images (floating), I’ve built my own theme upon Twitter Bootstrap 3.x. Bootstrap uses 4 breakpoints for devices, x-small (phones), small (tablets), medium (desktops) and large (xl-desktops).

My WP image sizes are glued to the Bootstrap column properties for large devices. My current layout has a content column (col-8) and a sidebar (col-3 with a col-1 offset = col-4). Only on x-small devices the sidebar is stacked below the content. My images are placed into 3/4/6/12 sub-grids of the main col-8 column.:

thumbnail: 155 px (col-8, sub-grid 3 = 25%)
medium: 220 px (col-8, sub-grid 4 = 33%)
large: 350 px (col-8, sub-grid 6 = 50%)
post-thumbnail: 740 px (col-8, = 100%)
original image: max. 4200w (I need some panorama shots)

The result: Just perfect. A magazine style site on tablets and desktops, a perfectly stacked version on phones.

Only drawback: Small devices are getting the pictures for large devices, just to scale them down.

The solution: WP 4.4 (I upgraded blind-eyed). After the upgrade I had these ?srcset“ and ?sizes“ in my mark-up. It seems, that a standard has been defined, while I was working on my theme and plug-ins. Good to hear.

?srcset“ is easy to understand. It’s auto generated and includes only images of same aspect ratio. Good.

My problem is with ?sizes“. How do I calculate or measure the percentage of the view port width? Like

(max-width: 709px) 85vw, (max-width: 909px) 67vw

This probably translates to: ?On a device with a max. view-port width of 709px this image needs 85% of the view-port. On devices with max. view-port width of 909px it will need 67%“. a.s.o. Now the browser can calculate the dimensions needed and pick the smallest image from the ?srcset“ list that fits it’s needs.

How do I handle images in columns, like 3 in a row? Each of it is smaller than 1/3 of the view-port, since there are borders and gutters around the images, as well as a scrollbar. On phones they stack, and gutters are removed. And still here they cover only a fraction of the real view-port, since they might have borders around them. How can I calculate the percentage of the view-port? Could I use a pixel value instead of ?85vw“? Something like:

(max-width: 709px) 500px, (max-width: 909px) 600px...

Couldn’t find any documentation with real use cases.