I want to wrap a Link tag around an image. However when doing so, the image appears much smaller than before (prior to adding the Link tag). How can I get the image back to its original size?

For clarity, remove the Link tag, the image size displays as desired. Add the Link tag, image displays much smaller than desired.

I am using MaterialUI, the NextJS Image tag and next version "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>

I want to wrap a Link tag around an image. However when doing so, the image appears much smaller than before (prior to adding the Link tag). How can I get the image back to its original size?

For clarity, remove the Link tag, the image size displays as desired. Add the Link tag, image displays much smaller than desired.

I am using MaterialUI, the NextJS Image tag and next version "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
• hyperlink
• navigation
• nextjs-image
• nextjs-dynamic-routing

• 1 Have you tried removing this style={{ width: "100%", height: "100%" }} from your Image tag, i think it might fix your issue – Raja Jahanzaib Commented Jan 20 at 6:10

1 Answer 1

The issue you're encountering is likely caused by the Link tag applying style. So I recommend below style for Link.

<Link href={`/services/${link}`} style={{display: "flex", width: "fit-content"}}>
    <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>