文章/答案/技术大牛

发布

社区首页 >问答首页 >对于高度和宽度受限的图像，我可以使用<picture>吗？

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

Stack Overflow用户

提问于 2015-04-21 16:38:08

回答 1查看 1.8K关注 0票数 7

我有一个幻灯片类的东西，图像将尽可能大，但不超过视口的宽度或高度。基本上是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>将描述符很快，但我想破解一些现在能工作的东西。

html

image

responsive-design

srcset

回答 1

Stack Overflow用户

回答已采纳

发布于 2015-04-21 19:06:17

我想它(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"
    />

另外，我还编写了一个脚本，自动计算父级高度/宽度受限大小的大小。看这里的父匹配脚本。

票数 7

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/29778235

复制

相似问题

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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