Custom width and height based on the breakpoint on <Image /> component
Answered
shadow posted this in #help-forum
shadowOP
Hi devs, how can i set different dimensions to a <Image /> component based on the breakpoint?
<div className="md:ml-auto flex justify-center items-center">
<Image
src="/cocktail.png"
alt="Cocktail"
width={400}
height={400}
className="rounded-lg"
/>
</div>Answered by chisto
<Image
src="/cocktail.png"
alt="Cocktail"
width={400}
height={400}
className="rounded-lg h-10 w-10 md:h-40 md:w-40"
/>
src="/cocktail.png"
alt="Cocktail"
width={400}
height={400}
className="rounded-lg h-10 w-10 md:h-40 md:w-40"
/>
2 Replies
<Image
src="/cocktail.png"
alt="Cocktail"
width={400}
height={400}
className="rounded-lg h-10 w-10 md:h-40 md:w-40"
/>
src="/cocktail.png"
alt="Cocktail"
width={400}
height={400}
className="rounded-lg h-10 w-10 md:h-40 md:w-40"
/>
Answer
From https://nextjs.org/docs/pages/building-your-application/optimizing/images#remote-images
The width and height attributes are used to infer the correct aspect ratio of image and avoid layout shift from the image loading in. The width and height do not determine the rendered size of the image file. Learn more about Image Sizing.https://nextjs.org/docs/pages/building-your-application/optimizing/images#image-sizing