如何使用 nextjs 更改图像大小

Question

我在使用 next/image 的 bootstrap 卡片中有一张图像。我希望图像更小，而不是填满卡片的整个顶部。假设大约是原始大小的 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

您可以在 Image 中使用 width 和 height 属性，例如

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

或

在 CSS 文件中为图像定义一个 class，然后将 className 添加到 Image 标签中，例如

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

Answer 2

要获得更多优化，您可以在 Next.config.js 中使用此选项： [图像优化-nextjs][1] [1]: https://nextjs.org/docs/basic-features/image-optimization#loader
您不需要在页面上导入图片。 next/image 默认识别 /public 目录。 src="/delta-logo.png"
并且您可以在图像标记中使用宽度和高度属性。

如何使用 nextjs 更改图像大小

How to change image size using nextjs

css

reactjs

bootstrap-4

next.js

bootstrap-cards