Next.js Discord

Discord Forum

Image with natural size

Unanswered
bardaxx™ posted this in #help-forum
Open in Discord
Hello there, I'm trying to achieve this with next/image. But every logo has it's own size, what's the best approach with next/image to handle it?

1 Reply

Barbary Lion
1. You can set exact width and height for each image and then use CSS and set height to auto.

 <Image
   src="/img/logo.png"
   alt="alt"
   width={200}
   height={100}
   style={{display: 'block', width: '100%', height: 'auto'}}
/>


2. Local images without width and height attributes: https://nextjs.org/docs/app/building-your-application/optimizing/images#local-images
Code from docs:

import Image from 'next/image'
import profilePic from './me.png'

export default function Page() {
  return (
    <Image
      src={profilePic}
      alt="Picture of the author"
      // width={500} automatically provided
      // height={500} automatically provided
      // blurDataURL="data:..." automatically provided
      // placeholder="blur" // Optional blur-up while loading
    />
  )
}