我可以对高度和宽度受限的图像使用 <picture> 吗？

Question

我有一个幻灯片放映之类的东西，其中图像会尽可能大地展开，但不会超过视口的宽度或高度。基本上 object-fit: contain.

我想让这些图像响应，因为 "as large as they can" 对于 phone 和一个很棒的大桌面是完全不同的。我不能使用 <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>

但这并不像屏幕方向那么简单，因为所涉及的实际纵横比可能会变得非常奇特，无论是对于视口（非常高的 phones、浏览器工具栏等）还是对于图像本身;同一张图片可能在一个屏幕上受宽度限制，但在另一个屏幕上受高度限制。我想我可以编写一个脚本来解析宽高比，但我对将其变成有意义的 srcset 和 sizes 列表的逻辑感到困惑。

理想情况下 <img srcset> 会 get the h descriptor soon，但我想一起破解一些现在可以使用的东西。

Answer 1

我想我明白了 (1/2) 等于 (width/height):

<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"
    />

附带说明：我还编写了一个脚本，可以自动计算父 height/width 约束尺寸的正确尺寸。请参阅此处 parent-fit script.

我可以对高度和宽度受限的图像使用 <picture> 吗？

Can I use <picture> for both height and width-constrained images?

html

image

responsive-design

srcset