I am trying to have an image’s height in a grid be dictated by the other content in it; not the image itself. I think screenshots will be easier to understand:
The content on the right is dynamic (this is ecommerce) and will change depending on the product. Thus I want the content on the right to dictate the height of the entire grid and thus resize the image on the left. Right now the image is dictating everything
HI @Douglas_Fullerton I can thing only about way that you set hard/exact size to grid (or row)
In your example is element height 570px so after set this height you set image to cover and left content to stretch.
Yes I was thinking that too, but the issue is that the text on the right is pulled from a CMS: So if for example there is 2 lines of text, the grid would be unnecessarily big if set to a fixed height
I will continue to play around; there must be way!
Hi @Douglas_Fullerton I’m glad to hear you solved it. I can only add that uneven height based on text content will create inconsistency of element height and image can have really narrow shape not revealing all important things in img. There is nothing wrong with that but it’s just what in UX is good to avoid especially when you present goods in shop but … If this solved your issue please mark any response as solution to close this request.