时间戳

首页 > 解决方案 > 如何使用 nextjs 更改图像大小

css - 如何使用 nextjs 更改图像大小

问题描述

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

标签： cssreactjsbootstrap-4next.jsbootstrap-cards

解决方案

您可以在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'/>

推荐阅读