https://codepen.io/vizman/pen/dyQzJKY?editors=1100 - here i wrote example what I want to achive. I have different aspect ratio images like on top row example and i want to create responsive gallery like "gallery I want" row. All images should have fixed height, fe. 300px on desktop, 200px on mobile, etc. and width should keep aspect ratio. Using img tag it is easy to achieve in css. But i dont know how to do same in gatsby.js using GatsbyImage.
I tried:
gallery {
childImageSharp {
gatsbyImageData(layout: CONSTRAINED, placeholder: "blurred")
}
}
and FULL_WIDTH with different styles and props and failed. Anyone can help?