如何在React JSX中为Next.js Image组件设置自动高度？

核心调整思路 #

• 移除硬编码的固定高度，依赖图片原始宽高比自动计算高度
• 配合父容器的固定宽度，调整Image组件的布局参数实现自适应
• 保留原有hover缩放效果与模糊占位符逻辑

调整后的代码（Pages Router 版本） #

const Logo = ({ logo, logoWidth, logoHeight }) => {
  if (!logo) return null;

  // 用图片原始尺寸计算宽高比，无原始数据时默认1:1兜底
  const aspectRatio = logoWidth && logoHeight ? logoWidth / logoHeight : 1;

  return (
    <Box
      sx={{
        width: "200px", // 固定容器宽度
        height: "auto", // 高度随图片自动撑开
        "& img": {
          transition: "transform .5s ease",
          "&:hover": {
            transform: "scale(1.05)",
          },
        },
      }}
    >
      <Image
        data-cy="employerPublicProfileLogo"
        objectFit="contain"
        width={logoWidth || 250}
        height={logoHeight || 250}
        sizes="200px" // 明确告知组件最终显示宽度，优化加载策略
        placeholder="blur"
        blurDataURL="/hiredinchina-loading-image.jpg"
        src={logo}
        alt="Logo"
      />
    </Box>
  );
};

关键说明 #

• 传递原始尺寸：建议从后端获取图片的原始logoWidth和logoHeight，这样能精准保持图片比例；若无法获取，可暂时用默认值，但优先推荐返回图片元数据。
• sizes属性：设置为容器固定宽度200px，让Next.js提前知晓图片最终渲染尺寸，提升加载性能。
• 父容器样式：height: auto确保容器高度随图片自动调整，避免出现空白或裁剪问题。

Next.js 13+ App Router 适配版本 #

import Image from 'next/image';

const Logo = ({ logo, logoWidth, logoHeight }) => {
  if (!logo) return null;
  const aspectRatio = logoWidth && logoHeight ? logoWidth / logoHeight : 1;

  return (
    <Box
      sx={{
        width: "200px",
        height: "auto",
        "& img": {
          transition: "transform .5s ease",
          "&:hover": {
            transform: "scale(1.05)",
          },
        },
      }}
    >
      <Image
        data-cy="employerPublicProfileLogo"
        objectFit="contain"
        src={logo}
        alt="Logo"
        width={200} // 直接匹配容器固定宽度
        height={200 / aspectRatio} // 根据比例自动计算高度
        placeholder="blur"
        blurDataURL="/hiredinchina-loading-image.jpg"
      />
    </Box>
  );
};

内容的提问来源于stack exchange，提问作者Luke