在 div 中调整 Next.js 图像组件的大小

Question

我尝试制作一个部分，在一侧包含一些文本，在另一侧包含应该响应的图像（即当 window 的尺寸也变小时图像变小）。

使用简单的 <img src="/myimage.extension" alt="describe my image" /> 就可以完美地工作。但是一旦我使用 Next.JS 图像组件（为了从它所做的优化中受益），它就会破坏响应能力。

的确，为了制作一种带有响应图像的英雄部分，我得到了这段代码（工作得很好）：

<>
<div className={"h-screen py-0 py-20 text-center bg-blue-100 text-dark-blue"}>
  <div
    className={"flex flex-col items-center justify-center h-full md:flex-row app-container md:justify-between"}>
    <div>
      <h1 className={"text-red-400"}>With the Image component</h1>
      <p>It doesn't resize on the size of the viewport</p>
    </div>
    <div className={"relative"}>
      <svg
        className={"absolute right-0 z-50 hidden w-1/2 sm:block"}
        css={css`top: 25px;left: 25px;`}
        xmlns="http://www.w3.org/2000/svg" viewBox="0 0 674 674"
      >
        <circle id="Ellipse_8" cx="337" cy="337" r="337" fill="#e23b58"/>
      </svg>
      <img
        src={"/image.jpg"}
        alt={"Some image description"}
      />
    </div>
  </div>
</div>
</>

然后，用 Image 组件替换 img 标签会破坏响应能力：图像永远不会变小。它保持其大小。

<>
  <div className={"h-screen py-0 py-20 text-center bg-green-100 text-dark-blue"}>
    <div
      className={"flex flex-col items-center justify-center h-full md:flex-row app-container md:justify-between"}>
      <div>
        <h1 className={"text-red-400"}>With the Image component</h1>
        <p>It doesn't resize on the size of the viewport</p>
      </div>
      <div className={"relative"}>
        <svg
          className={"absolute right-0 z-50 hidden w-1/2 sm:block"}
          css={css`top: 25px;left: 25px;`}
          xmlns="http://www.w3.org/2000/svg" viewBox="0 0 674 674"
        >
          <circle id="Ellipse_8" cx="337" cy="337" r="337" fill="#e23b58"/>
        </svg>
        <Image
          src={"/image.jpg"}
          alt={"Some image description"}
          width={1103}
          height={628}
        />
      </div>
    </div>
  </div>
</>

你可以看到这个 Sandbox 上发生了什么。我正在寻找一种方法，使我能够精确控制图像组件的定位方式。

Answer 1

问题不在图像组件中。它与应用于 div 容器的样式有关。

如果您从第 18-22 行的类中删除 items-center，您将看到图像正在调整大小：

<div className={"flex flex-col items-center justify-center ...}>

更改为：

<div className={"flex flex-col justify-center ...}>

在 div 中调整 Next.js 图像组件的大小

Resize a Next.js Image component inside a div

css

reactjs

next.js

tailwind-css

nextjs-image