Image with natural size
Unanswered
bardaxx™ posted this in #help-forum
bardaxx™OP
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.
2. Local images without width and height attributes: https://nextjs.org/docs/app/building-your-application/optimizing/images#local-images
Code from docs:
<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
/>
)
}