How to specify image height only and keep aspect ratio in Next.js?

Question

I want to specify my image height only and keep the image aspect ratio without hardcoding the width.

In a traditional img element I can do so:

<img src="/logo.png" alt="logo" height={30} />

But if I try using next/image:

<Image src="/logo.png" alt="logo" height={30} />;

I get the following error:

Error: Image with src "/logo.png" must use "width" and "height" properties or "layout='fill'" property.

juliomalves · Accepted Answer · 2021-09-20 13:32:08Z

4

You can set layout="fill" and objectFit="contain" to your Image so that it maintains its aspect ratio while filling its container. You can then add a wrapper div around the Image component and apply the height to it instead.

<div style={{ position: 'relative', height: '30px' }}> <Image src="/logo.png" layout="fill" objectFit="contain" /> </div>

answered Sep 20, 2021 at 13:32

juliomalves

51.1k23 gold badges180 silver badges170 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Kazuto_Ute Over a year ago

Thanks for your help, but I still get the wrong width for the image. For example, if I create a page component that only returns the <img> element, this element is positioned on the left and its width is still respecting the aspect ratio. But if the component returns the <div> + <Image> elements, the image now stretches across the screen.

juliomalves Over a year ago

@Kazuto_Ute Did you set objectFit="contain" as per my example? Here's a sample codesandbox with a working version of my snippet: codesandbox.io/s/epic-margulis-0zkbs.

Kazuto_Ute Over a year ago

Yes that is what I mean, the 2nd img element is stretched across the screen. What if I want the img element width to still respect the aspect ratio instead of stretching?

juliomalves Over a year ago

Do you know the aspect ratio in advance? You could add aspectRatio: "<ratio>" to the container style prop if so. Or, alternatively, you'll need to provide an explicit width to the container itself, the image would still maintain its aspect ratio though.

Kazuto_Ute Over a year ago

Unfortunately, the image used (hence the aspect ratio) could change from time to time. Ideally I would not like to change the code everytime the design team comes up with a new image. So there is no way to not hard-code the width or the aspect ratio in this case?

|

Collectives™ on Stack Overflow

How to specify image height only and keep aspect ratio in Next.js?

1 Answer 1

6 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Related