I've added a masonry hook for my Gatsby site which is a gallery. Works great on mp4s and gifs, but when the item is a Gatsby Image, it has no height.
I can set a height:500px, position:static, and img{object-fit:contain} on gatsby-image-wrapper, but it's oddly proportioned.
I think this is happening because the rendered img from Gatsby Image is position:absolute with object-fit:cover so the masonry hook doesn't know what size it is, but I'm too beginner to figure it out.
Gatsby Image in the masonry item looks like:
<div class=" gatsby-image-wrapper"
style="position: relative; overflow: hidden; max-width: 900px; max-height: 613px;">
<div aria-hidden="true" style="width: 100%; padding-bottom: 68%;"></div>
<picture><source srcset="myImage.jpg 225w,
myImage.jpg 450w,
myImage.jpg 900w,
myImage.jpg 1310w" sizes="(max-width: 900px) 100vw, 900px"><img sizes="(max-width: 900px) 100vw, 900px" srcset="myImage.jpg 225w,
myImage.jpg 450w,
myImage.jpg 900w,
myImage.jpg 1310w" src="myImage.jpg" loading="lazy" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: cover; object-position: center center; opacity: 1; transition: opacity 500ms ease 0s;">
</picture>
any help greatly appreciated, thanks