使用下一个图像组件保留图像的纵横比

Question

我正在使用 Next 的

Image

组件来加载徽标。该图像的尺寸为 1843x550 像素，但我使用宽度和高度属性来调整图像的大小以适应其所需的空间，即 83x24 像素。因为我使用的宽高比略有不同，所以我收到警告：

src“/images/Wordmark_Horizontal.png”的图像已修改宽度或高度，但没有修改另一个。如果您使用 CSS 更改图像的大小，还应包含样式“宽度：“自动””或“高度：“自动””以保持宽高比。

问题是，当我使用 css 将宽度和高度设置为 auto 时，我的图像变为 128x38 px，大于我需要的大小。

首先，为什么图像的尺寸是我没有指定的尺寸？我需要做什么才能既保留图像的纵横比，又保持其适当的大小？

我的代码：

<Image
    src={'/images/Wordmark_Horizontal.png'}
    width={83}
    height={24}
    alt="logo"
    className="h-auto w-auto"
/>

Answer 1

您可以使用父容器的

relative

定位来尝试此操作：

<div style={{ position: "relative", width: "250px", height: "100px" }}>
  <Image src="/mongodb.jpg" alt="logo" layout="fill" objectFit="fill" />
</div>

Answer 2

我将宽度设置为特定数字，并将高度设置为自动，它将调整大小以适应图像的宽高比。假设您使用 Tailwind css 作为 className。这是我的代码：

<Image
      src="/images/logo.png"
      width="84"
      height="0"
      className="w-full h-auto"
      alt="logo"
    />