我有一个幻灯片之类的东西，图像会尽可能地扩大，但不会超过视口的宽度或高度。基本上object-fit: contain。
我想让这些图像具有响应性，因为对于手机和大桌面来说“尽可能大”是完全不同的。我不能使用<img srcset>，因为现在，它只做屏幕密度（x描述符）或宽度（w描述符）。这样<picture>就可以自己手动制作选择逻辑了。
我开始：
<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>
但这并不像屏幕的方向那么简单，因为所涉及的实际纵横比可能会变得非常奇特，无论是对于视口（非常高的手机、浏览器工具栏等）还是对于图像本身；相同的图像可能在一个屏幕上受到宽度限制，但在另一个屏幕上受到高度限制。我想我可以编写一个解析纵横比的脚本，但我很难理解将其转化为有意义的列表的srcset逻辑sizes。
理想情况下 <img srcset>会很快得到h描述符，但我想一起破解一些现在可以工作的东西。