Question

我有一个幻灯片放映的东西，图像会尽可能大地扩展，但不会超过视口的宽度或高度。基本上是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>会get the h descriptor soon，但我想将现在可以解决的问题混在一起。

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

作为旁注：我还编写了一个脚本，可以自动计算父高度/宽度约束大小的正确大小。请参见parent-fit script。

我可以将<picture>用于高度和宽度受限的图像吗？</picture>

1 个答案: