NextJS中用Link包裹Image导致图片缩小的解决方法

我想用NextJS的Link标签包裹Image组件，但添加Link后图片显示尺寸比添加前小很多。移除Link标签时图片显示正常，加上就明显缩小。当前用了MaterialUI、NextJS Image标签，Next版本是14.2.9，相关代码如下：

<Link href={`/services/${link}`}>
  <Box
    sx={{
      display: "block",
      borderRadius: "0 0 2rem 0",
      overflow: "hidden",
      width: "100%",
      height: "100%",
      cursor: "pointer",
      position: "relative",
      "&:hover::before": {
        content: '""',
        position: "absolute",
        top: 0,
        left: 0,
        width: "100%",
        height: "100%",
        backgroundColor: "rgba(0, 0, 0, 0.5)",
        zIndex: 1,
      },
      "&:hover": {
        boxShadow: "0px 4px 20px rgba(0, 0, 0, 0.5)",
      },
    }}
  >
    <Image
      src={imageSrc}
      alt={title}
      priority={false}
      sizes="100vw"
      style={{ width: "100%", height: "100%" }}
      width={400}
      height={400}
    />
  </Box>
</Link>

问题原因 #

Next.js的Link组件默认是inline元素，它包裹设置了width:100%、height:100%的Box时，Link本身不会自动撑满父容器的空间，导致内部Box的100%宽高是基于Link的inline尺寸计算，最终图片被缩小。

解决办法 #

方法一：给Link添加block布局样式 #

让Link和内部Box一样撑满父容器，这样Box的100%宽高就能正确基于父容器计算：

<Link 
  href={`/services/${link}`}
  style={{ display: 'block', width: '100%', height: '100%' }}
>
  <Box
    sx={{
      display: "block",
      borderRadius: "0 0 2rem 0",
      overflow: "hidden",
      width: "100%",
      height: "100%",
      cursor: "pointer",
      position: "relative",
      "&:hover::before": {
        content: '""',
        position: "absolute",
        top: 0,
        left: 0,
        width: "100%",
        height: "100%",
        backgroundColor: "rgba(0, 0, 0, 0.5)",
        zIndex: 1,
      },
      "&:hover": {
        boxShadow: "0px 4px 20px rgba(0, 0, 0, 0.5)",
      },
    }}
  >
    <Image
      src={imageSrc}
      alt={title}
      priority={false}
      sizes="100vw"
      style={{ width: "100%", height: "100%" }}
      width={400}
      height={400}
    />
  </Box>
</Link>

方法二：将Link放入Box内部（绝对定位覆盖） #

让Box保持原有尺寸，通过绝对定位让Link铺满整个Box区域，确保点击有效：

<Box
  sx={{
    display: "block",
    borderRadius: "0 0 2rem 0",
    overflow: "hidden",
    width: "100%",
    height: "100%",
    cursor: "pointer",
    position: "relative",
    "&:hover::before": {
      content: '""',
      position: "absolute",
      top: 0,
      left: 0,
      width: "100%",
      height: "100%",
      backgroundColor: "rgba(0, 0, 0, 0.5)",
      zIndex: 1,
    },
    "&:hover": {
      boxShadow: "0px 4px 20px rgba(0, 0, 0, 0.5)",
    },
  }}
>
  <Link 
    href={`/services/${link}`}
    style={{ 
      position: 'absolute', 
      top: 0, 
      left: 0, 
      width: '100%', 
      height: '100%', 
      zIndex: 2 // 确保在hover遮罩层上方，不影响点击
    }}
  />
  <Image
    src={imageSrc}
    alt={title}
    priority={false}
    sizes="100vw"
    style={{ width: "100%", height: "100%" }}
    width={400}
    height={400}
  />
</Box>

额外检查点 #

如果用了上面的方法还是有问题，检查包裹Link/Box的父容器是否有明确的尺寸（比如宽高、flex:1），因为如果父容器本身没有尺寸，子元素的100%宽高就无法生效。

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