Next.js Discord

Discord Forum

How to adjust next Image height similar to height: auto

Unanswered
European anchovy posted this in #help-forum
Open in Discord
European anchovyOP
I was trying to make a next/image with adjustable height depending on the image, but it doesn't work completely as intended. Here is what I've tried:
<div
                style={{ paddingBottom: "100%" }} // Maintain a 1:1 aspect ratio
                className="relative"
              >
                <Image
                  src={mediaUrl}
                  fill
                  className="rounded-xl object-contain"
                  alt="Media"
                />
              </div>

First image shows how it looks like.

This is what I would rather want to have: 
<img
                src={mediaUrl}
                alt="Media Preview"
                className="w-full h-auto"
              />

The second image is from this code and the height:auto changes the height like I would want it to.

20 Replies

European anchovyOP
I tried it
it doesn't work
the height is unknown basically...
idk I might actually leave it like this...
the fixed height is not that bad...
but specify the width and Height to what ? I don't know the height
and if I remove padding-bottom I can't see the image at all
I am using tailwind
<div
                // style={{ paddingBottom: "100%" }} // Maintain a 1:1 aspect ratio
                className="relative w-full h-full"
              >
                <Image
                  src={mediaUrl}
                  fill
                  objectFit="contain"
                  className="rounded-xl"
                  alt="Media"
                />
              </div>
if I remove the padding the image is invisible or smth
If I add the padding back even with h-full it has the same height as the width
so it changed nothing
still the same
yeah the rounded-xl doesn't work anymore idk why
no matter if I add it to the image or parent div
still no change
it's still the same...nothing changed
it's fine...I'll just leave it like this honestly
thanks for your help
ok thanks