相关疑难解决方法(0)

我有一个图像,我想设置一个特定的宽度和高度(以像素为单位)

但如果我使用css(width:150px; height:100px)设置宽度和高度,图像将被拉伸,它可能是丑陋的.

如何使用CSS 将图像填充到特定大小,而不是拉伸它？

填充和拉伸图像的示例:

原始图片:

拉伸图像:

填充图片:

请注意,在上面的填充图像示例中:首先,将图像调整为150x255(保持纵横比),然后将其裁剪为150x100.

我有一个幻灯片放映的东西,图像将尽可能大,但不超过视口的宽度或高度.基本上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>就会获得h描述符,但我想将现在可以解决的问题混在一起.