Как сделать столбцы текста и изображения одинаковой высоты ⇐ Html

[Anonymous]

У меня есть контейнер с максимальной шириной и два элемента рядом с использованием flexbox:

• текстовый блок
• изображение

Оба элемента технически имеют ту же высоту, что и flex-элементы, но изображение сохраняет внутри себя пустое пространство, поскольку сохраняет соотношение сторон (

Код: Выделить всё

object-contain). Визуально это заставляет столбец изображения выглядеть короче, чем текстовый столбец.
Вместо этого я хочу:
[list]
[*]изображение должно сохранять соотношение сторон и не должно быть обрезано

[*]внутри контейнера изображения не должно быть пустого (белого) пространства

[*]когда изображение визуально короче из-за своего соотношения сторон текстовый контейнер должен расти горизонтально (занимать большую ширину), чтобы устранить пустые области, вместо того, чтобы заставлять оба столбца соответствовать высоте более высокого элемента.

[/list]
Я пробовал items-stretch

, но он выравнивается на основе самого высокого элемента, и мне действительно нужно, чтобы макет адаптировался к более короткому.
Вот упрощенный пример моего макет:

Код: Выделить всё

Adipisicing

Ea nostrud duis tempor nulla id aliquip nisi quis dolor aliquip reprehenderit.



[img]https://picsum.photos/500/150[/img]
      alt="Milestones"
class="w-full h-auto object-contain"
/>

Я добавил скриншоты, показывающие:



Как это выглядит сейчас
Как я хочу, чтобы это выглядело






(на изображении пустое место)


(без вертикальных пробелов, текст расширяется по горизонтали)



Достижимо ли это с помощью чистого CSS? Если да, то как мне это сделать?

Подробнее здесь: https://stackoverflow.com/questions/798 ... ual-height