如何使用 Next JS Image 组件为容器提供动态宽度？答案

【问题标题】：How to give the container a dynamic width with Next JS Image component?如何使用 Next JS Image 组件为容器提供动态宽度？
【发布时间】：2021-09-14 23:02:37
【问题描述】：

所以，我有一个容器 div 和一个 Image 组件。我希望图像高度等于容器高度的 100%，并且容器的宽度根据图像的宽高比自动决定。当我使用普通的img 标签时，这没有问题，但在下一个Image 组件的情况下，图像的宽度为0px。因为它要我为容器定义一个固定的宽度。 ?我怎样才能达到我想要的？

我正在做的是这样的：

对于 div：

div {
   height: 50px;
   width: auto;
}

对于图像组件：

<Image src="..." alt="..." layout="fill" />

【问题讨论】：

标签： css image next.js image-resizing next-images

【解决方案1】：

我认为最直接的方法是在 ems 或 rems 中定义 div 的宽度并为图像定义相同的宽度，以便它是确切的长度并且父元素具有比例与图像和 div 本身。祝你有美好的一天:)

【讨论】：

感谢您抽出宝贵时间回答，但问题是，图像已安装到容器中。例如，图像比例为：2:1。这意味着，如果我将容器宽度设置为 150 像素，高度设置为 50 像素，图像大小将为 100 像素 * 50 像素，容器宽度为 50 像素为空。如果我知道图像的比例，这将不是问题，但在我的情况下，图像源是动态的，比例不是固定的，所以我也不能给容器相同的比例；
唯一的漏洞就是将该图像硬编码为 150 px 宽，但它看起来真的很可怕，但也有相反的情况，如果设计允许您对 div 本身进行编码是 100px 或大约 20 ems，在我看来，这将是要走的路！希望这会有所帮助。

【解决方案2】：

据我所知，下一个 js 中的图像有一个很大的优势，一个延迟加载，保留图像将使用一次的空间，而不会破坏布局。

现在，如果我们不提前传递图像的大小，那将是不可能的。

Idk 的限制。所以，我赌这个原因。

这就是我使用大量 img 而不是 Image 的原因。但是，如果您知道确切的尺寸...最好使用 Image。

附言。 Google 开发人员参与了我刚才描述的功能开发。

【讨论】：