如何使用nextjs更改图像大小

3okqufwl 于 2023-11-18 发布在其他

关注(0)|答案(3)|浏览(173)

我有一个图像在引导卡使用next/image .我想图像是较小的，而不是填补整个卡的顶部部分.说约60%的原始大小.我试图 Package 在一个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>
  )
}

字符串

next.js

来源：https://stackoverflow.com/questions/69235164/how-to-change-image-size-using-nextjs

3条答案

按热度按时间

r7s23pms1#

1.要进行更多优化，您可以在Next.config.js：[image-optimization-nextjs][1] [1]：https://nextjs.org/docs/basic-features/image-optimization#loader中使用此选项
1.你不需要导入图片到你的页面上. next/image默认情况下recognize /public dir. src="/delta-logo.png”
1.您可以在Image标签中使用width和height属性。

赞(0）回复(0）举报 2023-11-18

yizd12fk2#

您可以在Image中使用width和height属性，如

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

型

赞(0）回复(0）举报 2023-11-18

lg40wkob3#

我使用以下方法更改了图像的大小

<div className="relative w-[50px] h-[50px] md:w-[100px] md:h-[100px]">
   <Image src="/images/myImage.png" alt="logo" fill />
</div>

字符串
将<Image>标记包含在元素中，将“relative”定位应用于div，并使用Tailwind CSS类调整图像大小。此外，确保在标记中包含“fill”属性。

赞(0）回复(0）举报 2023-11-18

我来回答

如何使用nextjs更改图像大小

3条答案

相关问题

热门标签

最新问答