CODEWITHSUNDEEP
cssimagenext.jsimage-resizingnext-images
noiseymur
noiseymur

Reputation: 876

How to give the container a dynamic width with Next JS Image component?

So, I have a container div and an Image component in it. I want the image height be equal to the 100% of container height, and the width of container to be automatically decided based on the width of image according to its aspect ratio. When I use a normal img tag, this works without a problem, but in case of Next Image component, the image is left with a width of 0px. Because it wants me to define a fixed width for the container. ? How can I achieve what I want ?

What I'm doing is this:

for the div:

div {
   height: 50px;
   width: auto;
}

for the Image component:

<Image src="..." alt="..." layout="fill" />

Upvotes: 1

Views: 3261

Answers (2)

Jose Javier Sanahuja
Jose Javier Sanahuja

Reputation: 110

As far as i know, Image in next js has one good great advantage, a lazyload preserving the space the image will use once is loaded without destroying the layout.

Now, that would be impossible if we dont pass the size of the image in advance.

Idk the limits of that. So, i am betting on this reason.

And thats the reason why i use a lot of img, instead of Image. But if you know the exact size... better use Image.

PS. Google developers participated on the feature development i just describe.

Upvotes: 1

theRish17
theRish17

Reputation: 9

I think the most straight forward way is to just define the width of the div in ems or rems and define the same for the image as well so that it is the exact length and the parent element has a ratio with the image and the div itself. Have a great Day :)

Upvotes: 0

Related Questions