html – 我可以用于高度和宽度受限的图像吗？

概述我有一个幻灯片放映的东西,图像将尽可能大,但不超过视口的宽度或高度.基本上是对象：包含. 我想让这些图像反应灵敏,因为对于手机而言,“尽可能大”,而大型桌面则非常不同.我不能使用< img srcset>因为现在,它只有屏幕密度(x描述符)或宽度(w描述符).离开< picture>自己手动制作选择逻辑. 我开始时： <picture> <source media="(orientation: 我有一个幻灯片放映的东西,图像将尽可能大,但不超过视口的宽度或高度.基本上是对象：包含.

我想让这些图像反应灵敏,因为对于手机而言,“尽可能大”,而大型桌面则非常不同.我不能使用< 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,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,但我想要一起解决现在可以工作的东西.

解决方法 我想我得到它(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.

总结

以上是内存溢出为你收集整理的html – 我可以用于高度和宽度受限的图像吗？全部内容，希望文章能够帮你解决html – 我可以用于高度和宽度受限的图像吗？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。