如何使用nextjs更改图像大小

Question

我使用

next/image

在引导卡中有一个图像。我希望图像较小，并且不要填满卡片的整个顶部。大约是原来大小的60%。我尝试将图像包装在 div 容器中并添加了一些 css，但对更改大小没有任何影响。

import Image from 'next/image'
import logo from '../public/delta-logo.png'
import { Card, Button } from 'react-bootstrap'
import styles from './landing.module.css'

import 'bootstrap/dist/css/bootstrap.min.css'

export default function LandingPage() {
  return (
    <Card style={{ width: '18rem' }}>
      <Image src={logo} alt='Picture of our Logo' />

      <Card.Body className='text-center'>
        <Card.Title>Card Title</Card.Title>
        <Card.Text>
          Some quick example text to build on the card title and make up the
          bulk of the card's content.
        </Card.Text>
        <Button variant='primary'>Go somewhere</Button>
      </Card.Body>
    </Card>
  )
}

Answer 1

1. 为了进行更多优化，您可以在 Next.config.js 中使用此选项： [图像优化-nextjs][1] [1]：https://nextjs.org/docs/basic-features/image-optimization#loader

2. 您不需要在页面上导入图像。 next/image 默认识别 /public 目录。 src="/delta-logo.png"

3. 并且您可以在图像标签中使用宽度和高度属性。

Answer 2

您可以在

width

中使用

height

和

Image

属性，例如

<Image src={logo} alt='Picture of our Logo' width={500} height={500}/>

或

在 CSS 文件中为图像定义一个类，然后将

className

添加到

Image

标签中，例如

<Image src={logo} alt='Picture of our Logo' className='yourClass'/>

Answer 3

我使用以下方法更改了图像的大小

<div className="relative w-[50px] h-[50px] md:w-[100px] md:h-[100px]">
   <Image src="/images/myImage.png" alt="logo" fill />
</div>

将

<Image>

标签包含在元素内，将“相对”定位应用于 div，并使用 Tailwind CSS 类调整图像大小。此外，请确保在标签上包含“fill”属性。