This has slowly been driving me nuts and hoping someone can help!
Having previously relied on background images I’m keen to achieve this with normal images and object fit. Basic hero section with info left (Col A) and image right (Col B). The info content (B) is dynamic via cms so the height of that column is variable. I want the height of Col B to be determined by the height of Col A at all times. This structure is set up using Flexbox.
Using background images, this is done. Col B will be whatever height it needs to be and the background image (set to cover) will fill the container. The image I’d want to use will most likely be portrait orientation and would be to be clipped on top and bottom.
Whilst Col B is set to stretch, adding an image element (set to cover) always reveals the full height of the image resulting in Col B, dictating the height of Col A - the opposite of what I want. The only way I can get the image to behave is to set a height for the image or any of the containing divs, but that stops it from being reactive to the variable height of Col A.
This feels like Flexbox/object positioning basics but I’m not sure if there is a solution with this setup or if object fit just needs that height-defined. One thing I have noticed is if the image is landscape orientation, fit cover fills the space properly as the width is always longer than the height. the image will be a cover of a document so will be portrait orientation and would like to avoid editors needing to crop the image.
Any help is appreciated.
No links to share, unfortunately.
