1

我在引导卡中有一个使用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>
  )
}
4

2 回答 2

1

您可以在like中使用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'/>
于 2021-09-18T13:39:27.780 回答
1

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

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

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

于 2021-09-18T13:51:32.340 回答