我可以使用<图片>对于高度和宽度受限的图像？ [英] Can I use <picture> for both height and width-constrained images?

问题描述

我有一种幻灯片放映方式，图片会尽可能扩大，但不会超过视口的宽度或高度。基本上 object-fit：包含。

我想让这些图片响应，因为他们可以为一部手机和一个伟大的大型桌面是非常不同的。我不能使用< 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.jpgalt =男人在香蕉皮上滑倒> 
< /图片> 
  

但它并不像屏幕的方向那么简单，因为实际的纵横比可能相当奇特，既用于视口（非常高的手机，浏览器工具栏等），也用于图像本身;相同的图像可能在一个屏幕上被宽度限制，但高度限制在另一个屏幕上。我想我可以编写一个解析纵横比的脚本，但是我很难将它转化为一个有意义的 srcset 和尺寸 list。

理想 < img srcset> 将尽快得到 h 描述符，但我想一起破解一些现在可以工作的东西。

解决方案

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

 < img 
 srcset =http：// lorempixel （100vh *（1/2））
 /> gt ; 
  

或者添加更多代码：

 < img 
 srcset =http://lorempixel.com/960/1920/sports/10/w1920/ 960w
 sizes =（min-aspect-比率：1/2）calc（100vh *（1/2）），100vw
 /> 
  

---

附注：我也写过脚本会自动计算父高度/宽度约束尺寸的正确尺寸。请参阅父母适合脚本。

I have a slideshow sort of thing where images will expand as large as they can, but not exceed the viewport's width or height. Basically object-fit: contain.

I'd like to make these images responsive, since "as large as they can" for a phone and a great big desktop is quite the difference. I can't use <img srcset> because right now, it only does screen density (x descriptors) or width (w descriptors). So that leaves <picture> to manually make the selection logic myself.

I started with:

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

But it's not as simple as the screen's orientation, since the actual aspect ratios involved can get pretty exotic, both for viewports (very tall phones, browser toolbars, etc.) and for the images themselves; the same image might be width-constrained on one screen, but height-constrained on another. I figure I can write a script that parses out the aspect ratios, but I'm stumped on the logic to turn that into a meaningful srcset and sizes list.

Ideally <img srcset> will get the h descriptor soon, but I'd like to hack something together that will work now.

解决方案

I think I got it (1/2) is equal to (width/height):

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

Or with more code:

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

---

As a side note: I also have written a script that automatically calculates the right sizes for parent height/width constrained sizes. See here the parent-fit script.

这篇关于我可以使用&lt;图片&gt;对于高度和宽度受限的图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！