I have a slide show view where the images will expand as large as possible, but not exceed the width or height of the viewport. Mostly object-fit: contain .
I would like to make these images responsive, as "as much as possible" for the phone and a large large desktop are the difference. I cannot use <img srcset> because right now it has only screen density ( x descriptors) or width ( w descriptors). To leave the <picture> manually, make your own selection logic.
I started with:
<picture> <source media="(orientation:portrait)" sizes="(max-width: 1200px) 100vw, 1200px" srcset="300.jpg 300w, 500.jpg 500w, 800.jpg 800w, 1200.jpg 1200w"> <source sizes="(max-width: 1200px) 100vw, 1200px" srcset="300.jpg 300w, 500.jpg 500w, 800.jpg 800w, 1200.jpg 1200w"> <img src="default.jpg" alt="a man slipping on a banana peel"> </picture>
But this is not so simple as the screen orientation, since the actual proportions can be quite exotic, both for viewports (very tall phones, browser toolbars, etc.) and for the images themselves; one image can be limited by the width on one screen, but with a height limit on another. I suppose I can write a script that parses the proportions, but I cannot say that the logic will turn this into a meaningful list of srcset and sizes .
Ideally, <img srcset> will get the h descriptor soon , but I would like to hack something together that will work now.
source share