How to resize while maintaining aspect ratio?

[nk9]

The Cloudinary docs discuss resizing images, and say it's possible to provide just one dimention and have the other dimension calculated and the aspect ratio maintained. But when I leave the width out of CldImage, React complains.

    return (
        <CldImage
            height="250"
            src={href}>
        </CldImage>
    )

Error: Image with src https://res.cloudinary.com/xxx is missing required "width" property.

How do I scale down an image to a single fixed dimension while maintaining the aspect ratio?

[nk9]

Ultimately, I am trying to use Cloudinary as the image host for an image gallery using Lightgallery. I want it to look like the masonry layout that LightGallery advertises, but if I can't scale the images down while maintaining the aspect ratio, then… I don't know how I'm supposed to do that. Certainly I don't want to load the full-size images and try to scale THOSE for the thumbnails!

[colbyfayock]

hey @nk9 - to give some background, CldImage is a wrapper around the Next.js Image component. this requirement actually comes from that component, but with good reason, to avoid layout shifts, but it's not always simple to have the dimensions like what it seems you're running into

the Next.js Image component has the ability to set teh fill prop to true which can help with this:

https://nextjs.org/docs/api-reference/next/image#fill

this should work similarly with <CldImage fill />

I also have an example thats using it here though its skewed a bit because of the height i fixed on to it to show it working: https://next-cloudinary.spacejelly.dev/components/cldimage/examples#next-image-features

[nk9]

Thank you very much for the quick reply, I'll have a look at your links. Was there another bit you planned to include? I see a stray backtick…

[colbyfayock]

oops just <CldImage fill /> - funny it just hid the rest of the line in its entirety since it didnt see a closing tick

[nk9]

For posterity, I wanted to say that I got around this by using React Grid Gallery, which chooses how to scale my images so they end up at the appropriate size for this style of layout. Then it just spits out the scaledHeight and scaledWidth which I pass directly into CldImage.