https://i.sstatic.net/zhJ3t.png
I am facing a challenge with a horizontal flexbox containing 3 columns. The left column is black, the center one is white filled with text, and the rightmost column is blue also with text.
The issue arises when the text columns automatically adjust their height to match the black column, causing an imbalance in the layout due to the image's aspect ratio preservation. This results in the image stretching the text columns beyond their necessary height.
My objective is to have the flexbox match the height of the tallest text column without allowing the image column to dictate its overall height. In Tailwind, I attempted using object-cover and object-center on the image to fill the gray area within the black box and maintain proper dimensions through object-fit.
Various attempts such as setting the image height to max-content and experimenting with different height values have not yielded a satisfactory solution so far. Is there anyone who can provide assistance?
<div class="flex items-center h-full">
<div class="w-1/3 black">
<img class="max-h-max object-cover object-center" />
</div>
<div class="w-1/3 white">
<p>Short Text</p>
</div>
<div class="w-1/3 blue">
<p>Short Text</p>
</div>
</div>