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

Posted 2023-03-06

【中文标题】基于内容高度的可变图像高度[重复]

【英文标题】：Variable image height based on content height [duplicate]

【发布时间】：2022-01-20 23:11:19

【问题描述】：

您对如何使用 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>

【参考方案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

【讨论】：

恐怕这行不通。我认为问题在于图像的大小。

@CătălinAvasiloaie 看看：play.tailwindcss.com/GdVJp8k9zA。你使用tailwindCss！？我不得不将 className 更改为 class。

@CătălinAvasiloaie，它看起来非常好:-)

我认为你没有理解我的问题...事实上我希望图像具有从右侧开始的最大文本高度。

是的，它现在有点用，但我对“h-car”属性一无所知。