Html 我可以使用<；图片>；对于高度和宽度约束的图像？

我有一个幻灯片式的东西，图像将尽可能地扩大，但不超过视口的宽度或高度。基本上

对象匹配：包含

我想让这些图像具有响应性，因为“尽可能大”的手机和超大的桌面是完全不同的。我不能使用
，因为现在它只做屏幕密度（
x
描述符）或宽度（
w
描述符）。这样就剩下
自己手动进行选择逻辑

我从以下几点开始：

<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
和
size
列表的逻辑

理想情况下
会，但我想把现在可以用的东西拼凑起来。
我想我得到了它（1/2）等于（宽度/高度）：



或使用更多代码：

<img
    srcset="http://lorempixel.com/960/1920/sports/10/w1920/ 960w"
    sizes="(min-aspect-ratio: 1/2) calc(100vh * (1 / 2)), 100vw"
    />




作为旁注：我还编写了一个脚本，可以自动为受高度/宽度约束的父级尺寸计算正确的尺寸。请参见此处。
我的头部目前无法工作，但您只需更改大小，如果您使用JS执行所有操作，您只需以像素为单位计算一个大小值，所以不太难。（我可能会尝试为此做一个lazySizes插件）。一般来说，如果它始终是视口，而不是您正在使用的较小元素，那么它的宽度约束总是size=“100vw”，如果它是高度约束size=“calc（100vh*（heightOfImage/WidtOfimage））”作为基本概念证明，是的，它将是整个视口，但在生产中，它将是各种容器中的图像
纵横比
！为什么我不记得了？
calc
也很受欢迎。对于非常薄的视口，我是否也可以使用
（最大纵横比：1/2）
来支持它？我一直在研究这个问题！谢谢一个lotok，所以我要做的是插入图像的纵横比？对于比率为1.5的横向图像，其最大显示高度为&max height 90%，我可以使用：size=“（最小纵横比：1.5）90vh，90vw”这是否正确？
<img
    srcset="http://lorempixel.com/960/1920/sports/10/w1920/ 960w"
    sizes="(min-aspect-ratio: 1/2) calc(100vh * (1 / 2)), 100vw"
    />