Image object fit without a fixed height

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.


I might be wrong with this, but hopefully this will help!

Look at having an section_image-wrapper, with the section_image inside. The section_image-wrapper should be set to relative, and take up 100% of the height of it’s parent (the flex columns or grid). Then set the section_image to be 100% width and height, positioned absolute, and set to “cover” so that it adjusts to fill the entire block. (tbh I don’t think you even need the relative/absolute properties for this but it’s the first thing that came to mind!)

Let me know if that might be an answer?

It works! Absolute positioning is needed on the image along with fit cover. So simple now I can see it. Thanks for taking the time :pray:

1 Like