How to change image size using nextjs

Question

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>
  )
}

Answer 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'/>