javascript - 为什么它们有不同的尺寸？ (next/image & img html 元素)

Question

不同的尺寸! next/img 组件的图像和 img 元素的图像具有不同的大小。 他们使用相同的图像源，并且具有相同的风格! 但是 next/image 会使图像缩小，img 元素不会。

• 图片来自 next/img

• 图像由 img 元素

代码:

export default function Home() {
  return (
    <div className="flex">
      <Image src={appleImage} alt="apple" priority />
      <Image src="/apple.png" width={600} height={840} alt="apple" />
      <img src="/apple.png" alt="apple" />
      <img src="/apple.png" width={600} height={840} alt="apple" />
    </div>
  );
}

*className flex 用于 tailwind.css

.flex {
    display: flex;
}

我想知道为什么它们有不同的尺寸。

Answer 1

如您所见，您的代码中包含三个图像，下一个 js 提供了图像效率，可以根据宽度减小尺寸，并使它们具有响应性。在您的情况下，您有一张来自 HTML 的图像占用了全部 600 像素，但由于屏幕表面不适用于 1800 像素 3*600，下一张图像会自动缩小，但现在它们的纵横比受到干扰，您可以添加一个属性height: auto 在你的 CSS 文件中，纵横比也会变得很好，如果你想使用精确的大小，那么你需要做 width: 600px !important