2

I have an image in a bootstrap card using next/image. I would like the image to be smaller and not fill the entire top portion of the card. Say about 60% of the original size. I tried to wrap the image in a div container and added some css but did not have any affect on changing the size.

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>
  )
}
rf guy
  • 379
  • 10
  • 26

2 Answers2

1

You can either use width and height properties in Image like

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

OR

Define a class for your image in your CSS file, and add that className to your Image tag like

<Image src={logo} alt='Picture of our Logo' className='yourClass'/>
Tushar Gupta
  • 15,504
  • 1
  • 29
  • 47
  • I was unable to get it to work creating a class in my CSS file. Has things changed? I even tried className={styles.logo}. Any suggestions? – arec May 27 '22 at 04:52
1

  1. for more optimizing you can use this option in Next.config.js: [image-optimization-nextjs][1] [1]: https://nextjs.org/docs/basic-features/image-optimization#loader

  2. you don't need to import images on your page. next/image by default recognize /public dir. src="/delta-logo.png"

  3. and You can either use width and height properties in Image tag.

SAeeD
  • 46
  • 3