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

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.