Variable image height based on content height

Question

Do you have any ideas about how I can use Tailwind CSS to make the image from the left div have a variable height, based on the content from the right div?

This is what I have now:

<div className="bg-ez-white dark:bg-ez-bg-dark shadow-lg sm:w-full rounded-xl flex flex-col md:items-stretch md:flex-row overflow-hidden my-4">
  <div className="md:w-1/2 bg-rose-400 overflow-hidden">
    <img src="https://i.imgur.com/dCpwjBj.jpeg" />
  </div>
  <div className="bg-rose-400 h-fit md:w-1/2 flex flex-col p-4 md:p-6">
    <div className="font-ez-font-inter font-bold text-sm md:text-base text-ez-accent-lighter dark:text-ez-bg-light flex space-x-2">
      {categories.map(category => (
      <span key={category}>{category}</span>
      ))}
    </div>
    <h1 className="font-ez-font-inter text-3xl md:text-4xl font-bold">{title}</h1>
    <p className="font-ez-font-poppins text-ez-accent-light text-base md:text-lg dark:text-ez-bg-light">
      There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text.
    </p>
    <div className=" flex items-end flex-row-reverse">
      <p className="font-ez-font-inter font-bold text-sm md:text-base text-ez-accent-lighter dark:text-ez-bg-light">{createdAt}</p>
    </div>
  </div>
</div>

Maik Lowrey · Accepted Answer · 2021-12-18T11:57:29.260

1

OK. that answear would be very short:-) You have to add only h-auto in this line:

<div className="bg-rose-400 h-fit md:w-1/2 flex flex-col p-4 md:p-6 h-auto">

working example https://play.tailwindcss.com/GdVJp8k9zA

edited Dec 18 '21 at 11:57

answered Dec 18 '21 at 11:48

Maik Lowrey

15,957
6
40
79

I'm afraid this doesn't work. I think that the problem is the size of the image. – Cătălin Avasiloaie Dec 18 '21 at 11:54
@CătălinAvasiloaie take a look: https://play.tailwindcss.com/GdVJp8k9zA . You use tailwindCss!? i had to change className to class. – Maik Lowrey Dec 18 '21 at 11:57
@CătălinAvasiloaie and it looks very well :-) – Maik Lowrey Dec 18 '21 at 11:58
I think you didn't understand my problem... The fact is that I want the image to have the max height of the text from the right. – Cătălin Avasiloaie Dec 18 '21 at 11:58
@CătălinAvasiloaie ok. i really misunderstood. In this case, I would make the image a background image and then add the class 'h-car' to the image container. – Maik Lowrey Dec 18 '21 at 12:03
1

Yes, it kinda works now, but I don't know anything about the 'h-car' property. – Cătălin Avasiloaie Dec 18 '21 at 12:08
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/240252/discussion-between-maik-lowrey-and-ctlin-avasiloaie). – Maik Lowrey Dec 18 '21 at 12:09

Variable image height based on content height

1 Answers1