Bdtjtk

I'm trying to figure out how I can best use responsive images (srcset / sizes) to fit my template and choose the right image to load.

My template has basically 3 breakpoints:
Up to 1000px: everything is in one column occupying 100% of the width
Up to 1600px: everything is in two column with an approximate ratio of 2/3 - 1/3
Above 1600px: two colums 4/5 - 1/5 but inside the first 4/5 column I have a smaller one

For the template under 1000px, I use the following in sizes:

(max-width: 1024px) calc(100vw - 20px)

That works fine, it occupies the space I want and that's an easy one because I don't need to take other columns into account.

The tricky part comes from the other ones because the size of an image inside one of the columns depends on the size of the other columns. In any case, I would like the image to occupy 100% of the available space but with "sizes" I'm struggling to achieve something that works.

For up to 1600px I have:

(max-width: 1600px) 66vw

This should correspond to the ratio used in the template but in reality it never achieves the goal of fitting the image inside the parent div.

For the last breakpoint, I have the same issue, it either falls too short either too large.

Here is an example of a picture:

<amp-img  src="https://www.laurentwillen.be/wp-content/uploads/sites/21/2018/05/xiaomi-redmi-note-5-face-up-down.jpg" alt="xiaomi redmi note 5" width="4000" height="1240" class="alignleft size-full wp-image-2620" srcset="https://test.laurentwillen.be/wp-content/uploads/sites/25/2018/05/xiaomi-redmi-note-5-face-up-down.jpg 4000w, https://test.laurentwillen.be/wp-content/uploads/sites/25/2018/05/xiaomi-redmi-note-5-face-up-down-300x93.jpg 300w, https://test.laurentwillen.be/wp-content/uploads/sites/25/2018/05/xiaomi-redmi-note-5-face-up-down-768x238.jpg 768w, https://test.laurentwillen.be/wp-content/uploads/sites/25/2018/05/xiaomi-redmi-note-5-face-up-down-1024x317.jpg 1024w, https://test.laurentwillen.be/wp-content/uploads/sites/25/2018/05/xiaomi-redmi-note-5-face-up-down-1400x434.jpg 1400w, https://test.laurentwillen.be/wp-content/uploads/sites/25/2018/05/xiaomi-redmi-note-5-face-up-down-900x279.jpg 900w, https://test.laurentwillen.be/wp-content/uploads/sites/25/2018/05/xiaomi-redmi-note-5-face-up-down-700x217.jpg 700w, https://test.laurentwillen.be/wp-content/uploads/sites/25/2018/05/xiaomi-redmi-note-5-face-up-down-500x155.jpg 500w" sizes="(max-width: 1024px) calc(100vw - 15px), (max-width: 1600px) 66vw, 50vw" /></amp-img>

If I suppress "sizes", it makes it worse as it displays the image in its full size. AMP requires width and height to be displayed so I can't get rid of that and as I'm using PHP, I can't find width and height with the appropriate values before the page is loaded.

Do you have any suggestions?

Thanks

Laurent