基于内容高度的可变图像高度

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

基于内容高度的可变图像高度

Variable image height based on content height

html

tailwind-css