这是顺风/下一个例子

<div className="lg:absolute lg:inset-y-0 lg:right-0 lg:w-1/2">
      <Image
        className="h-56 w-full object-cover sm:h-72 md:h-96 lg:w-full lg:h-full"
        src={image}
        alt={title}
        // this is deprecated in next 13, just use "fill" as prop
        layout="fill"
      />
    </div>

from docs

填充：

一个布尔值，它使图像填充父元素，而不是设置宽度和高度。
父元素必须分配位置：“相对”，位置：“固定”，或位置：“绝对”风格。
默认情况下，img元素将被自动分配位置：“绝对”风格。
如果你想检测尺寸并且根据尺寸你想使用不同的图像，你可以使用react-resize-detector npm包。

import { useResizeDetector } from 'react-resize-detector';

const CustomComponent = () => {
  const { width, height, ref } = useResizeDetector();
  return <div ref={ref}>{`${width}x${height}`}</div>;
};

检测到大小后，可以编写逻辑来决定使用哪个图像

我使用了nextjs的useMediaQuery解决了这个问题。}，但结果并不完美，因为如果您使用移动的？[....]：[....]你不能向图像组件添加“优先级”，如果你试图添加它，它会先加载两个图像，然后执行条件语句来隐藏一个。所以你必须牺牲这一点。