如何使用 next-image 将图像缩小到“最大宽度”和“最大高度”？答案

【问题标题】：How can I use next-image to scale images down to "max-width" and "max-height"?如何使用 next-image 将图像缩小到“最大宽度”和“最大高度”？
【发布时间】：2021-12-20 07:44:00
【问题描述】：

我有一个使用不同比例和纵横比的图像的博客。有些短而宽，有些又高又窄。你可以看一个例子here。

我希望我的图像：

最多与帖子一样宽（不超过其容器的 100% 宽度），这样当图片宽而短时，它会填满帖子宽度的 100%。
高度最多为 350 像素，这样当图片又高又窄时，其大小会受到高度的限制 - 高度为 350 像素，并且位于帖子的中间。

像这样：

为了使用常规的img 标签来实现这一点，我使用以下 css：

  img {
    display: block;
    max-width: 100%;
    max-height: 350px; // to restrict the height of tall narrow images
    margin: auto; // to center the tall narrow images when their width is less than 100%
  }

现在我想使用next-image 自动缩小和优化我的图像，但我似乎无法找到正确的样式和参数组合来实现相同的效果。

当我设置layout="responsive" 时，图像总是填充容器宽度的100%，忽略max-height 参数。因此，如果图像非常高且非常窄，它仍然会被柱子完全拉伸，使其高得离谱。

像这样：

当我设置layout="fill" objectFit="contain" 时，我可以将图像包装在一个容器中并将容器的css 设置为width:100%; height: 350px。现在它将缩小高窄图像至多350px 高度，但如果图像非常宽且非常短，容器的高度仍然是 350px（即使现在应该短得多，因为图像很短），这会在图像周围创建垂直空间。

像这样：

你能帮我弄清楚如何解决这个问题吗？我应该怎么做才能将上面的 css 与 next-image 等效？

【问题讨论】：

您的实现可能存在一些问题。我只用layout="fill" objectFit="contain" 得到desired result（您在第一张图片中显示的内容）。 Here is a CodeSandbox.
@CodeSandbox - 你的第一张和最后一张图片展示了问题。尽管图像在垂直方向上很短，但每个图像的上方和下方都有水平的灰色条，它们的容器占用了相同的空间。这就是我正在努力解决的问题。如果这些图片嵌入到帖子中，它们周围会有很多空白区域（灰色条）。
是的，我现在看到了。您是否事先知道图像的大小，即您可以使用填充以外的布局吗？如果是，那么你可以这样做：codesandbox.io/s/quirky-smoke-93jhw?file=/index.css

标签： next.js nextjs-image

【解决方案1】：

结果出乎意料地难以完成，但我做到了。

function img({ src, width, height }) {
  const style = { paddingBottom: `min(350px, ${100 / (width / height)}%)` }
  return (
    <div className={`next-image-wrapper`} style={style}>
      <Image className="next-image" src={src} layout="fill" objectFit="contain" />
    </div>
  )
}

我使用next-image-wrapper 设置正确的图像大小和比例，然后使用layout="fill" objectFit="contain" 告诉next-image 使图像填充包装器并发挥其魔力。

next-image-wrapper 的宽度始终为 100%，填充容器。

Padding 用于设置包装器的高度。

对于宽幅和短幅图像，内边距保持图像的纵横比，使其高度与宽度成正比。公式 (100 / (width / height)) 使用原始图像的宽度和高度来计算填充应该有多大以保持纵横比。

对于又高又窄的图像，我使用 css min() 函数来确保上面计算的填充不会超过 350px。这样，只要它低于350px，填充就保持成比例，然后它变成350px。此时，next-image 将自动将图像放入此高度的框内。

为了获得原始图像的宽度和高度，我在处理我的 mdx 文件时使用了rehype-img-size 插件，如here 所述。

【讨论】：