ARTICLE AD BOX
I have a container with a max-width and two elements side by side using flexbox:
a text block
an image
Both elements technically have the same height as flex items, but the image keeps empty space inside itself because it preserves its aspect ratio (object-contain). Visually, this makes the image column look shorter than the text column.
What I want instead is:
the image must keep its aspect ratio and must not be cropped
there should be no empty (white) space inside the image container
when the image is visually shorter because of its aspect ratio, the text container should grow horizontally (take more width) to eliminate the empty areas, instead of forcing both columns to match the height of the taller element
I tried items-stretch, but it equalizes based on the tallest element, and I actually need the layout to adapt to the shorter one.
Here is a simplified example of my layout:
I added screenshots showing:
Is this achievable with pure CSS? If yes how can I do?
