在没有水平空白的 NextJs 中显示图像答案

【问题标题】：Displaying Images in NextJs without horizontal white space在没有水平空白的 NextJs 中显示图像
【发布时间】：2021-12-06 06:55:10
【问题描述】：

我在 NextJs 应用程序中使用标签呈现图像。我想响应地显示图像，而不会导致水平空白。例如，请参见此图像

您可以看到有很多空白，因为我正在硬编码图像的高度和宽度。我的代码是

                  <Image
                src={urlFor(node).url()}
                layout={"responsive"}
              width={600}
                height={400}
                alt={"content image"}
              />

有没有办法显示没有这些空白的响应式图像？

【问题讨论】：

您确定 Image 周围的包装元素没有大小（宽度）限制吗？
包装器没有大小限制。这是我设置的宽度和高度，这导致了我相信的空白

标签： reactjs next.js sanity

【解决方案1】：

响应式布局中的 next/image 组件以下列方式工作（图片）

注意我使用tailwindcss作为重要的方面属性来表达行为，接下来在其元素上使用直接样式。

<div class="block relative overflow-hidden">
  <div class="block" style="padding-bottom: var(--padding-bottom)"></div>
  <img 
    class="absolute top-0 right-0 left-0 bottom-0 
           max-h-full max-w-full min-h-full min-w-full
           h-0 w-0" 
    src="..." 
    ...
  >
</div>

其中--padding-bottom 是(height / width * 100)% 从道具中抓取的。

所以如果你的图片不能改变布局宽度。图像只是试图填充所有给定的空间。内部 div 试图保持纵横比干净和精确。外部 div 负责输出视图中的图像空间（大小）。

在 Next.js 的 10.1 版本中，添加了 a feature layout=" responsive" 以使图像 100% 进入其容器

【讨论】：

有没有办法将图片的实际分辨率设置为响应式的高度和宽度？
如果你想让图像和它的固有尺寸一样大，你可以将图像的相同高度和宽度传递给 Image 周围的简单 wraonpper div 的样式属性
有没有办法获取图片的宽高？因为每天都会发布不同尺寸的图片
有一些方法可以获取图片的固有尺寸，但是都需要图片完全加载，如果你想等待稍后再添加图片，会导致你的设计中出现FOIT，宽度和高度也用于可访问性和性能。我猜您的样式或包装器组件有问题，请尝试检查 dem 并查看导致大小问题的原因。