基于内容高度的可变图像高度[重复]

Question

您对如何使用 Tailwind CSS 使左侧 div 中的图像根据右侧 div 中的内容具有可变高度有任何想法吗？

这就是我现在拥有的：

<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>

Answer 1

好的。那个答案会很短:-) 你只需要在这一行添加h-auto：

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

工作示例 https://play.tailwindcss.com/GdVJp8k9zA