如何使其父 div 的 NextJS Image 组件的高度和宽度为 100%？

Question

作为标题，我正在努力让Image表现得像img ，有谁知道如何让Image像下面的例子一样实现img ？

  <div style={{ width: "100vw", height: "100vh", display: "flex" }}>
    {/* img */}
    <div style={{ width: "50%", height: "100%", background: "red" }}>
      <img
        src="https://t4.ftcdn.net/jpg/03/00/94/69/360_F_300946931_kSR84OqudEhsmBZH47HU6ud7aZIDMjEx.jpg"
        alt=""
        style={{ width: "100%", height: "100%", objectFit: "cover" }}
      />
    </div>
    {/* Image */}
    <div style={{ width: "50%", height: "100%", background: "blue" }}>
      <Image
        src="https://t4.ftcdn.net/jpg/03/00/94/69/360_F_300946931_kSR84OqudEhsmBZH47HU6ud7aZIDMjEx.jpg"
        alt=""
        width="1"
        height="1"
        layout="responsive"
        objectFit="cover"
      />
    </div>
  </div>

输出：

#UPDATE这就是答案。

      {/* Image */}
      <div
        style={{
          width: "50%",
          height: "100%",
          background: "blue",
          position: "relative",
        }}
      >
        <Image
          src="https://t4.ftcdn.net/jpg/03/00/94/69/360_F_300946931_kSR84OqudEhsmBZH47HU6ud7aZIDMjEx.jpg"
          alt=""
          layout="fill"
          objectFit="cover"
        />
      </div>

输出：

Answer 1

好的，我看到您希望图像采用其父元素的宽度和高度，您可以使用layout="fill"而不是responsive ，这会导致图像扩展以填充其父元素。

像这样的东西：

<div style={{width: '100%', height: '100%', position: 'relative'}}>
  <Image
    alt='Mountains'
    src='/mountains.jpg'
    layout='fill'
    objectFit='contain'
  />
</div>

Answer 2

给它的父母一个块的显示

并取出预设的宽高属性

 <div style={{ width: "50%", height: "100%", background: "blue",display: "block" }}>
  <Image
    src="https://t4.ftcdn.net/jpg/03/00/94/69/360_F_300946931_kSR84OqudEhsmBZH47HU6ud7aZIDMjEx.jpg"
    alt=""
    layout="responsive"
    objectFit="cover"
  />
</div>

你可以查看文档