我可以对受高度和宽度约束的图像使用吗？

Question

我有一个幻灯片类的东西，图像将尽可能扩大，但不会超过视口的宽度或高度。基本上对象适合：包含。

我想让这些图像具有响应性，因为“尽可能大”的手机和超大的桌面是完全不同的。我无法使用<代码>

我从：

<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和尺寸列表。

理想情况下<代码>

Answer 1

我想我明白了（1/2）等于（宽/高）：

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

或使用更多代码：

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

顺便说一句：我还编写了一个脚本，可以自动计算父高度/宽度受限尺寸的正确尺寸。请参阅此处的父适合脚本。