Possible to set image width and height to be automatic?

[Nate-Potter]

Is it possible to set all of the images' width/height to be automatic? Then I could set max-sizes in CSS styling. Something like:
{
src: gallery.gallery1,
width: "auto",
height: "auto",
},

If you leave width/height blank or do what I have exampled, it doesn't properly follow the layout type (rows, columns, masonry)

Thank you!

[igordanchenko]

Both width and height are required image attributes; you must provide numeric values.

https://react-photo-album.com/documentation#Photo

[Nate-Potter]

Thank you @igordanchenko , I understand that part of the documentation. I was just trying to see if there is a possible way to automatically use the image's default width and height values. but without having to manually enter each individual image's width/height (as each image I am importing has a unique size)

[igordanchenko]

I'm not sure what you mean by "image's default width and height values." This library requires images' dimensions to calculate the layout.

[Nate-Potter]

By "image's default width and height values," I mean the inherent dimensions of an image file like a .png or .jpg. These dimensions are already specified within the image file itself.

In the documentation, it's typical to set the width and height properties for each image explicitly, like so:

{
src: gallery.gallery1,
width: 300,
height: 400,
},
{
src: gallery.gallery2,
width: 500,
height: 200,
},

However, I'm curious if there's a way to automate this process by utilizing the default dimensions of the images. For example:

{
src: gallery.gallery1,
width: x, // Default width of the image
height: y, // Default height of the image
},
{
src: gallery.gallery2,
width: x, // Default width of the image
height: y, // Default height of the image
},

Where 'x' and 'y' represent the default width and height of each image, respectively. I understand that width and height are typically expected to be numerical values in pixels, but I'm exploring if there's a way to automate this process to avoid manually looking up dimensions for every image.

[igordanchenko]

Please understand that this library doesn't work with files directly, but rather expects 3 pieces of information describing each image:

• image source (it can be a relative URL, external URL, base64-encoded data: URL, blob URL, etc.)
• image intrinsic width in pixels
• image intrinsic height in pixels

So to answer your question one more time, there is no magic value that you can pass instead of the actual image width and height. You must provide both width and height, which must be numeric.

I'm unable to provide any meaningful advice on how "to automate this process" as it depends on multiple project-specific factors:

• framework / build toolchain (Next.js, Vite, Remix, CRA, etc.)
• application type (client-side SPA, SSR, React server components, etc.)
• images' location (co-located with the source code, hosted on an external CDN, etc.)