我是NextJS的新手，我使用它的Image标签在我的应用程序中创建了一个图像。但是图像的大小只有在我改变它的宽度值时才会改变，改变高度值根本不会影响它。下面是这个图像：
<Image src="/Logo.png" alt="Logo" height={10} width={100} />
这里的图像取了宽度的值，结果变大了。如果我替换了高度和宽度的值，那么它也取了宽度的值，结果变小了。我甚至试着把高度属性放在宽度之后，但是什么都没有改变。我在这里做错了什么？
7cwmlq891#
可以将图像组件 Package 在div中，并按如下所示设置其样式：
<div style={{ position: "relative", width: `${100}px`, height: `${10}px` }}> <Image src="/Logo.png" alt="Logo" fill style={{ objectFit: "contain" }} /> </div>
请注意：
fill
layout="fill"
objectFit
objectPosition
span
e0bqpujr2#
用您希望的图像高度和宽度将标记括在中在标记中添加layout=“fill”
<div style={{width: '100px', height: '100px'}}> <Image src="/Logo.png" alt="Logo" layout='fill' objectFit='contain' /> </div>
2条答案
按热度按时间7cwmlq891#
可以将图像组件 Package 在div中，并按如下所示设置其样式：
请注意：
fill图像在DOM中是绝对定位的fill是next 13中的一个 prop （旧版本使用layout="fill"）objectFit在样式对象内部传递（可选objectPosition），这些属性将添加到呈现的span元素样式属性中e0bqpujr2#
用您希望的图像高度和宽度将标记括在中
在标记中添加layout=“fill”